为什么我的响应使用正确的数据执行了不止一次，而不是只使用 useEffect() 执行了一次？

Question

我知道有一个空的依赖项 [] 只执行一次 useEffect() 但是当它确实只执行一次并且有一个空的依赖项 [] - 它在控制台中记录一个空数组。

当它不为空时，它只是不断地记录，看不到尽头（使用正确的数据）。我不确定为什么它不能用我需要使用的数据正确记录一次。

我做错了什么？

代码如下：

const [uploadsData, setUploadsData] = useState([]);

const getUploads = async () => {
    const headers = {
        "Accept": 'application/json',
        "Authorization": `Bearer ${authToken}`
    }

    await axios.get('http://localhost:8000/api/get-uploads', {headers})
        .then(resp => {
            console.log(resp);
            setUploadsData([resp.data]);
        }).catch(error => {
        console.log(error);
    });
};

useEffect(() => {
    getUploads();
    // logs empty array in the console if dependency array is empty
    // logs correct data when dependency array isn't empty - i.e. [uploadsData]
    console.log(uploadsData);
}, []);

Answer 1

第一次打印空数组，因为在 React 中更新状态是异步的。

假设您将 uploadsData 添加到依赖项数组。当您的效果运行时，它会更新 uploadsData THEN 效果会再次触发。

这将永远持续下去！

Answer 2

那是因为您在 useEffect 挂钩的回调中引用了 uploadsData 并且为了获得正确的控制台日志，您应该运行该代码在一个单独的 useEffect勾.

useEffect(() => {
    getUploads();
}, []);

useEffect(() => {
    // logs empty array in the console if dependency array is empty
    // logs correct data when dependency array isn't empty - i.e. [uploadsData]
    console.log(uploadsData);
}, [uploadsData]);

这样，getUploads 函数只被调用一次，并向浏览器控制台输出正确的 uploadData。

为什么我的响应使用正确的数据执行了不止一次，而不是只使用 useEffect() 执行了一次？

Why's my response being executed more than once with the correct data instead of just only once with useEffect()?

javascript

debugging

reactjs