我如何获取 get api 调用的数据，格式为 reactjs 中 object 数组中的 object 嵌套数组？

Question

1. 首先这是我的 api 数据数据。

{
    "code": 200,
    "message": "Request fulfilled, document follows",
    "data": [
        {
            "sn": "ACC-LEW-1JY1-J4X2",
            "created_on": "2022-11-12T07:42:26.531786Z",
            "owner": "devtest01",
            "toy_user_type": 1,
            "shared_status": "Owned",
            "product_data": {
                "id": 179,
                "product_skuid": "any-name",
                "variant_id": "any-id",
                "product_name": "any-product-name",
                "product_type_val": "car-toy",
                "product_category_slug": "stunt-car",
                "desc": null,
            },
            "attribute_data": {
                "toy_distance_travelled": "0",
                "toy_time_played": "0",
                "toy_last_updated": "0",
                "toy_donuts": "0",
                "toy_rash_drives": "0",
                "toy_smooth_drives": "0",
                "toy_top_boost": "0",
                "toy_tank_size": "0",
                "toy_draft_collector": "0",
                "toy_acceleration": "0",
                "toy_braking": "0",
                "toy_name": "",
                "toy_last_played": "",
                "toy_experience": "0",
                "toy_drifts": "0",
                "toy_top_speed": "0",
                "drifts": "0",
                "toy_last_maintainence_distance": "0"
            },
            "game_attribute_data": [
                {
                    "attr_key": "td_distance_travelled",
                    "value": 21,
                    "sync_version": 3
                },
                {
                    "attr_key": "td_time_played",
                    "value": 8,
                    "sync_version": 3
                },
                {
                    "attr_key": "td_drifts_completed",
                    "value": 3,
                    "sync_version": 3
                }
            ]
        },
    ],
    "error": null,
    "server_time": "2022-11-21T12:57:44.319Z"
}

2. 我想访问 game_attribute_data 的数据。 我正在尝试使用 map function 但我无法获取数据。

3. 这是我在 React.js 中使用 fetch 方法调用 api

const allToysData = async () => {
    await fetch(
      `URL`,
      {
        method: "GET",
        headers: {
          Authorization: "token"
        },
        redirect: "follow"
      }
    )
      .then(response => response.json())
      .then(data => {
        const toysdata = data.data;
        const updatedToysData = toysdata.map(
          (x: {
            created_on: any;
            owner: any;
            shared_status: any;
            sn: any;
            attribute_data: any;
            product_data: any;
            game_attribute_data: any;
          }) => ({
            created_on: x.created_on,
            owner: x.owner,
            shared_status: x.shared_status,
            sn: x.sn,
            toy_drifts: x.attribute_data.toy_drifts,
            toy_time_played: x.attribute_data.toy_time_played,
            toy_last_played: x.attribute_data.toy_last_played,
            toy_last_maintainence_distance: x.attribute_data.toy_last_maintainence_distance,
            product_skuid: x.product_data.product_skuid,
            product_image_1x: x.product_data.data.product_image_1x,
            game_attribute_data: x.game_attribute_data.map(x => x),
          })
        );

        const result = updatedToysData.map(x => x.game_attribute_data);
        setToyAttribute(updatedToysData);
        setArrToys(updatedToysData);
      })
      // eslint-disable-next-line no-console
      .catch(error => console.log(`Error: ${error}`));
  };

3. 我想在表格中显示 game_attribute_data 的数据。 我应该如何访问 React.js 中的数据。

我已经尝试使用 map function 获取数据，但数据未在表格中呈现，所以请告诉我我的错误可能在哪里。

Answer 1

{
    data.data
    .map((item)=>item.game_attribute_data)
    .map((game_attribute_data)=>(game_attribute_data)
    .map((value,key)=>{

    return <tr key={key}>
      <td>{value.attr_key}</td>
      <td>{value.value}</td>
      <td>{value.sync_version}</td>
    </tr>
  }))
}

这是片段。 在整页上查看

 // Get a hook function const {useState} = React; const Example = ({title}) => { const [data,setData] = useState({ "code": 200, "message": "Request fulfilled, document follows", "data": [ { "sn": "ACC-LEW-1JY1-J4X2", "created_on": "2022-11-12T07:42:26.531786Z", "owner": "devtest01", "toy_user_type": 1, "shared_status": "Owned", "product_data": { "id": 179, "product_skuid": "any-name", "variant_id": "any-id", "product_name": "any-product-name", "product_type_val": "car-toy", "product_category_slug": "stunt-car", "desc": null, }, "attribute_data": { "toy_distance_travelled": "0", "toy_time_played": "0", "toy_last_updated": "0", "toy_donuts": "0", "toy_rash_drives": "0", "toy_smooth_drives": "0", "toy_top_boost": "0", "toy_tank_size": "0", "toy_draft_collector": "0", "toy_acceleration": "0", "toy_braking": "0", "toy_name": "", "toy_last_played": "", "toy_experience": "0", "toy_drifts": "0", "toy_top_speed": "0", "drifts": "0", "toy_last_maintainence_distance": "0" }, "game_attribute_data": [ { "attr_key": "td_distance_travelled", "value": 21, "sync_version": 3 }, { "attr_key": "td_time_played", "value": 8, "sync_version": 3 }, { "attr_key": "td_drifts_completed", "value": 3, "sync_version": 3 } ] }, ], "error": null, "server_time": "2022-11-21T12:57:44.319Z" }) return ( <table > <thead> <tr> <th>Attr Key</th> <th>Value</th> <th>Sync Version</th> </tr> </thead> <tbody> { data.data.map((item)=>item.game_attribute_data).map((game_attribute_data)=>(game_attribute_data).map((value,key)=>{ console.log(value) return <tr key={key}> <td>{value.attr_key}</td> <td>{value.value}</td> <td>{value.sync_version}</td> </tr> })) } </tbody> </table> ); }; // Render it ReactDOM.createRoot( document.getElementById("root") ).render( <Example title="Example using Hooks:" /> );

 <div id="root"></div> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>

Answer 2

根据您上面的最新评论，您只是在寻求帮助获取和存储与 API 响应的game_attribute_data分开的 game_attribute_data，对吗？ 如果是这样，这就是我的建议：

1. 创建一个新的 state 变量来存储此数据。 前任：

const [gameAttribData, setGameAttribData] = useState([]);

2. 在你的allToysData function 中，我可能会创建一些变量（而不是通过 API 响应数据进行映射）（一个用于你将最终设置的每个唯一的 state 变量），循环响应数据（使用.forEach ），以及为您查看的每个元素更新每个变量。 game_attribute_data示例：

.then(data => {
  const newGameAttribData = [];

  // Loop through API response data
  data.data.forEach((x: {
    created_on: any;
    owner: any;
    shared_status: any;
    sn: any;
    attribute_data: any;
    product_data: any;
    game_attribute_data: any;
  }) => {
    // Add this element's data to arrays
    newGameAttribData.push(x.game_attribute_data);
  });

  // Update your state variables
  setGameAttribData(newGameAttribData);
});

现在您应该能够访问此gameAttribData之外的 gameAttribData，以便将其呈现到屏幕上。 希望您可以调整上面的代码以供您使用（我不确定您希望如何将其呈现到屏幕上）。