将多个 fetch API 的数据传递到数组中以在函数外部访问时遇到问题

如何解决将多个 fetch API 的数据传递到数组中以在函数外部访问时遇到问题

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

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

解决方法

你能试试这个吗：

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>
  );
}

,

您只看到一个条目，因为在数组中，因为您正在改变 dataArray 并将其再次设置为不会触发组件重新渲染的状态。我宁愿将逻辑拆分为两个组件，而不是在一个组件中查询所有 'rfid'，我将有一个 RFID 组件，该组件将 RFID 作为道具，并在它的 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','2022916526'];

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