设置状态不适用于多个api获取的react组件
设置状态不适用于多个api获取的react组件
提问于 2019-06-29 15:12:19
我将信息(这是一个I数组)通过prop从一个component (component1)传递到另一个(component2)。
可以在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中单击数据时，数据会再次被提取并呈现，而不是获得相同的初始获取数据。
回答 1
Stack Overflow用户
发布于 2019-06-29 16:49:49
在组件挂载上获取一次数据，尝试添加一个取取间隔。
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>
</>
);
}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56818618
复制相关文章
相似问题
腾讯云开发者
