将多次获取 API 的数据传递到数组以在函数外部访问时出现问题

Question

尝试从多个 API 获取数据并将其传递给数组。数据仅在函数内部获取和传递。使用 useState 设置数据，最后只有一个数据传递到数组中。也使用了 Promise.all 方法，但当数据设置为使用状态时仍然给出相同的结果和无限循环。

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

export default function GetFirebaseRFID() {

  const [rfidData, setRfidData] = useState([]);
  let arrayList = ['24637310', '1182372559', '2022916526'];
  var dataArray = [];

  useEffect(() => {
    arrayList.forEach((element) => {
      fetch(`https://localhost:44301/api/unit/rfid/${element}`)
      .then(res => res.json())
      .then(data => {
        dataArray.push(data);
        setRfidData(dataArray);
      })
    });
  }, [])



  return (
    <>
      {console.log(rfidData)}
      {rfidData.map(data=> {
      return (
      <tr>
        <td>{data.itemID}</td>
        <td>{data.price}</td>
        </tr>
        )
      }
      )}

      
    </>
  );
}

这是当数据设置为使用状态并在 useEffect 内部调用时

enter image description here

这是在useEffect之外调用设置数据的时候。映射数据仅显示一个数据对象

Code and consoleLog output

Answer 1

您只看到一个条目，因为在数组中，因为您正在改变 dataArray 并将其再次设置为不会触发组件重新呈现的状态。我宁愿将逻辑分成两个组件，而不是在一个组件中查询所有“rfid”，我会有一个 RFID 组件，它将 RFID 作为 prop 并在它的 useEffect 中查询 API 仅用于一个 RFID 它收到。

function RFID({ id }) {
const [data, setData] = useState('');

useEffect(() => {
    fetch(`https://localhost:44301/api/unit/rfid/${id}`)
      .then(res => res.json())
      .then(data => {
        setData(data);
      })
  }, [])
 
  return (
    <tr>
      <td>{data.itemID}</td>
      <td>{data.price}</td>
    </tr>
  );
}

export default function GetFirebaseRFID() {

  let arrayList = ['24637310', '1182372559', '2022916526'];

  return (
    <>
      {arrayList.map(id => <RFID id={id} />)}   
    </>
  );
}

Answer 2

你能试试这个吗:

function YourComponent() {
  const [data, setData] = useState([]);

  useEffect(() => {
    getDataHandler();
  }, []);

  const getDataHandler = async () => {
    const arrayList = ['24637310', '1182372559', '2022916526'];
    const finalData = [];

    for (const item of arrayList) {
      const response = await fetch(`URL_OF_YOUR_API_WITH_${item}`);
      const resData = await response.json();
      finalData.push(resData);
    }

    setData(finalData);
  };

  return (
    <table>
      <tbody>
        {data.map((item) => (
          <tr key={item.itemID}>
            <td>{item.itemID}</td>
            <td>{item.price}</td>
          </tr>
        ))}
      </tbody>
    </table>
  );
}

将多次获取 API 的数据传递到数组以在函数外部访问时出现问题

Having issues passing data of a multiple fetch API into an array to access outside the function

javascript

reactjs

fetch-api

console.log