How to interact with backend data in React?

2 years ago
Benjamin Taylor
2 minutes

In React, interacting with backend data typically involves the following steps:

  1. Initiate a network request: Use libraries such as fetch or axios to send HTTP requests to backend API interfaces.
  2. Handle response: Processing the data returned from the backend in the component. You can use the then and catch methods to handle successful and failed responses. In the then method, you can store the returned data in the component’s state for use or rendering in the component.
  3. Update component state: Store the data returned by the backend in the component’s state, and use the setState method to update the component’s state. After updating the state, React will re-render the component.
  4. Render data: Render data to the page using JSX syntax in the render method based on the component’s state.

Here is a simple example:

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const MyComponent = () => {
  const [data, setData] = useState([]);

  useEffect(() => {
    axios.get('/api/data') // 发起GET请求到后端API
      .then(response => {
        setData(response.data); // 将后端返回的数据存储到组件状态中
      })
      .catch(error => {
        console.error(error);
      });
  }, []);

  return (
    <div>
      {data.map(item => (
        <p key={item.id}>{item.name}</p> // 渲染数据到页面上
      ))}
    </div>
  );
};

export default MyComponent;

Please note that in the above example, the axios library was used to make network requests. You can also use other network request libraries or the native fetch API to achieve the same operation. Additionally, useState and useEffect Hooks were used in the above example to manage the state and side effects of the component.

bannerAds