设置状态不适用于React组件中的多个API提取

Question

我正在通过prop从一个component（component1）到另一个（component2）传递信息（它是id的数组）。

可以在component2中成功访问数据，但是问题是我试图遍历该数组以从API获取某些数据。

component1有一个链接，当您单击它时，它会显示来自component2的信息。当我console.log()来自component2的道具时，它会显示正确的信息。但是有问题的部分正在获取。当我单击一次时，它将获取正确的数据，但是如果再次单击，我仍然会获取已获取的初始数据。以下是我的代码

component1

…
 <div className="vehicleDetail">
    <VehicleDetail vehicles={toDisplay.vehicleID} />
 </div>
…

component2

import React, { useState, useEffect } from 'react';
import fetch from 'node-fetch';

export default function VehicleDetail(props) {
  const [vehicleState, setVehicleState] = useState([]);
  console.log(props.vehicleID);
  useEffect(() => {
    let vehicles = [];
    props.vehicles.forEach((vehicleID, index) => {
      fetch(`/api/vehicle/${vehicleID}`)
        .then(data => {
          return data.json();
        })
        .then(data => {
          vehicles.push(data.data);
        });
    });
    setVehicleState(vehicles);
  }, []);
  return <p>Hi</p>;
}

当我从component1中单击时，会再次获取并渲染数据，而不是获得最初获取的相同数据。

Answer 1

您一次在组件安装架上获取数据，请尝试添加获取间隔。

For example：

function VehicleDetail() {
  const [vehiclesIDs, setVehiclesIDs] = useState([]);

  useEffect(() => {
    const id = setInterval(() => {
      fetch('https://randomuser.me/api/')
        .then(data => {
          return data.json();
        })
        .then(data => {
          const id = data.results[0].id.value;
          setVehiclesIDs(prevState => [
            ...prevState,
            id ? id : prevState.length
          ]);
        });
    }, 3000);
    return () => clearInterval(id);
  }, [setVehiclesIDs]);

  return (
    <>
      <h1>Vehicles IDs Fetched every 3 sec</h1>
      <h2>
        {vehiclesIDs.map(id => (
          <div key={id}>{id}</div>
        ))}
      </h2>
    </>
  );
}