reactでJSONデータを読み取る方法は何ですか。

1年 ago
結衣, 春花
1 minute

ReactでJSONデータを読み取るには、fetch関数を使用してリクエストを送信し、データを取得します。以下はサンプルコードです：

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

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

  useEffect(() => {
    fetch('data.json') // 读取data.json文件
      .then(response => response.json()) // 将响应解析为JSON格式
      .then(jsonData => setData(jsonData)) // 将JSON数据存储到状态中
      .catch(error => console.error(error)); // 处理请求错误
  }, []);

  return (
    <div>
      {data.map(item => (
        <div key={item.id}>
          <h2>{item.title}</h2>
          <p>{item.description}</p>
        </div>
      ))}
    </div>
  );
};

export default MyComponent;

上記のコードでは、fetch関数を使用してGETリクエストを送信し、data.jsonファイルを読み取ります。 次に、応答をJSON形式のデータに解析し、それをdataという名前の状態に保存します。 最後に、map関数を使用してdata配列を反復処理し、各アイテムのタイトルと説明をページにレンダリングします。

上記のコードは、ReactのHooks API（useStateとuseEffect）を使用した関数コンポーネントです。関数コンポーネントとHooks APIの使用は、Reactの最新の推奨方法です。

bannerAds