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() 来自Lodash。

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

useEffect理解的问题。不传递任何依赖项数组时无限循环运行

2 个答案: