Question

我的组件中有一个函数（loadList），可以从API加载列表数据

在运行时，我想获取所有数据，所以我有以下代码：

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

我有一个状态（changedFilter）再次处理重新加载列表：

useEffect(() => {
    loadList();
}, [changedFilter]);

但是在检查“ DevTools”>“网络”选项卡之后，在这种情况下我有2个XHR请求...

显然，默认情况下，React会将useState的初始值视为更改，并在更改后的状态上运行第二个useEffect ...

有什么窍门吗？

谢谢

Answer 1

useEffect(() => { loadList(); }, [changedFilter]);

也会与第一个useEffect一起在第一个渲染时触发，因此具有[]依赖关系的第一手使用效果是多余的。只有第二次useEffect可以解决您的目的。

Answer 2

您可以通过两种方式避免useEffect在初始渲染上运行。

首先：使用参考来跟踪初始渲染

const initialRender = useRef(true);
useEffect(() => {
    if(!initialRender.current) {
        loadList();
    } else {
        initialRender.current = false;
    }
}, [changedFilter]);

第二：检查是否存在changeFilter（如果未定义或最初为空）

useEffect(() => {
    if(changedFilter) { // Change it to changeFilter.length > 0 if its an empty array initially
       loadList();
    }
}, [changedFilter]);

React useState在运行时运行useEffect

2 个答案: