javascript - 设置状态不适用于反应组件中的多个 api 获取

Question

我正在将信息（这是一个 id 数组）prop从一个component（component1）传递到另一个（component2）。

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

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

组件1

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

组件2

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 中单击时，会再次获取并呈现数据，而不是获取最初获取的相同数据。

标签： javascriptreactjsasynchronousfetch-api

Answer 1

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

例如：

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