reactとバックエンドのデータのやり取りはどう実装するのか。

2年 ago
夏樹, 風
1 minute

Reactとバックエンドデータのやり取りは様々な方法で実現できますが、一般的な方法の一つは次の通りです：

  1. Reactコンポーネントのライフサイクルメソッドを使用して、Fetch APIまたはAxiosライブラリを使ってHTTPリクエストを送信し、バックエンドAPIからデータを取得してコンポーネントの状態を更新したりデータを表示する。
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. Context APIまたはReduxを使用して、取得したデータをグローバルな状態で管理し、アプリケーション全体で共有して使用できます。

最初に、データを保存し、データの取得と更新方法を提供するContextまたはReduxストアを作成します。次に、データにアクセスする必要があるコンポーネントを、ContextのProviderまたはReduxのProviderでラップします。

// 数据上下文
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;

これらは、Reactとバックエンドデータのやり取りの一般的な実装方法ですが、具体的な実装方法は、アプリケーションの構造やバックエンドAPIの特性によって異なる可能性があります。

bannerAds