使用效果理解的问题.无限循环在未传递任何依赖项数组时运行

Question

>我正在useEffect内部获取数据，并在数据到达时更新本地状态。但是如果我不将依赖数组传递给useEffect，状态会更新，但它运行无限循环。另一方面，如果我将依赖数组作为空或带有状态传递，那么它不会更新状态(即(数据没有从我的 axios 请求中设置为本地状态变量。

const [availableCars, setAvailableCars] = useState([]);
useEffect(() => {
postRequest(formData, headers).then((data) => {
console.log('Vehicles Response:', data);
console.log('Vehicles Response:', data.status);
if (data.status == 'ok') {
const vehiclesData = data.vehicles;
setAvailableCars(vehiclesData);
}
});
}, []);

Answer 1

您正在导致重新渲染的无限循环，因为您始终在状态中设置响应数据，即使它没有更改，这反过来又会导致重新渲染，然后您再次分配给状态，循环继续。

您需要做的是根据状态中拥有的数据检查接收的数据，并且仅在它们不同时才设置它。

我不知道你的data是什么样子的，但你可以做这样的事情：

if (data.status == 'ok' && JSON.stringify(data.vehicles) !== JSON.stringify(availableCars)) {
setAvailableCars(data.vehicles);
}

我在这里使用 JSON 的 stringify((，因为对象之间的相等是通过 JavaScript 中的引用完成的。如果你不想使用它，你可以使用 isEqual(( 来自洛达什。

Answer 2

发生的情况是由于组件生命周期的差异，这些差异在useEffect钩子下统一在功能组件中。

试试这个，我希望它能解决问题：

const [availableCars, setAvailableCars] = useState([]);
const [ready, setReady] = useState(false);
useEffect(() => {
if(ready === false) {
postRequest(formData, headers).then((data) => {
console.log('Vehicles Response:', data);
console.log('Vehicles Response:', data.status);

if (data.status == 'ok') {
const vehiclesData = data.vehicles;
setAvailableCars(vehiclesData);
}
});
setReady(true);
}
}, [ready]);