How to implement the interaction between React and backend data?

1 year ago
Benjamin Taylor
2 minutes

There are various ways to interact with backend data in React, and one common method is as follows:

  1. Send HTTP requests using Fetch API or Axios library: In React component’s lifecycle methods, utilize either the Fetch API or Axios library to send HTTP requests to the backend API, retrieve data, and update the component’s state or display the data.
import React, { useState, useEffect } from 'react';
import axios from 'axios';

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

  useEffect(() => {
    axios.get('/api/data') // 发送GET请求到后端的'/api/data'路由
      .then(response => {
        setData(response.data); // 更新组件的状态，存储从后端获取的数据
      })
      .catch(error => {
        console.error('Error fetching data:', error);
      });
  }, []);

  return (
    <div>
      {data.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
};

export default ExampleComponent;
  1. Use Context API or Redux to manage global state: store data retrieved from the backend in global state for sharing and usage throughout the entire application.

First, create a Context or Redux store to store data and provide methods for retrieving and updating data. Then, wrap the components that need access to the data with the Provider of Context or Redux in the component.

// 数据上下文
import React, { createContext, useState, useEffect } from 'react';
import axios from 'axios';

export const DataContext = createContext();

export const DataProvider = ({ children }) => {
  const [data, setData] = useState([]);

  useEffect(() => {
    axios.get('/api/data') // 发送GET请求到后端的'/api/data'路由
      .then(response => {
        setData(response.data); // 更新全局数据状态
      })
      .catch(error => {
        console.error('Error fetching data:', error);
      });
  }, []);

  return (
    <DataContext.Provider value={data}>
      {children}
    </DataContext.Provider>
  );
};

// 使用数据上下文的组件
import React, { useContext } from 'react';
import { DataContext } from './DataContext';

const ExampleComponent = () => {
  const data = useContext(DataContext);

  return (
    <div>
      {data.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
};

export default ExampleComponent;

These are some common ways for React to interact with backend data, the actual implementation may vary depending on your application architecture and backend API characteristics.

bannerAds