リアクトはバックエンドデータとどのようにやり取りするのですか？

1年 ago
海斗, 葵
1 minute

Reactとバックエンドデータのやり取りを行うために通常以下の手順が使用されます：

  1. ネットワークリクエストの発行：通常、バックエンドAPIインターフェースにHTTPリクエストを送信するために、fetchやaxiosなどのライブラリを使用してネットワークリクエストを発行します。
  2. レスポンスの処理：コンポーネント内でバックエンドからのデータを処理します。 成功と失敗のレスポンスを処理するためにthenとcatchメソッドを使用できます。 thenメソッドでは、返されたデータをコンポーネントの状態に保存して、コンポーネントで使用したり表示したりすることができます。
  3. コンポーネントの状態を更新します：バックエンドから返されたデータをコンポーネントの状態に保存し、setStateメソッドを使用してコンポーネントの状態を更新できます。状態を更新すると、Reactはコンポーネントを再レンダリングします。
  4. データのレンダリング：コンポーネントの状態に基づいて、JSX構文を使用してrenderメソッドでデータをページにレンダリングします。

以下は基本的な例です。

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;

上記の例では、axiosライブラリを使用してネットワークリクエストを送信していますが、同様の操作を行うために他のネットワークリクエストライブラリやネイティブのfetch APIを使用することもできます。また、useStateとuseEffect Hookを使用してコンポーネントの状態と副作用を管理しています。

bannerAds