React useEffect Hook 抱怨缺少依赖

Question

我有两个相互通信的组件。在组件 A 中，我有一个位置列表，每当用户单击此组件中的一个位置时，都会根据单击的位置过滤组件 B 中的属性列表。这行得通，到目前为止一切顺利。但是在组件 B 中，我使用一个 useEffect 挂钩来检查通过组件 A 的 props 到达它的 selectedLocation 变量，这样我就可以更新状态。在这个 useEffect() 调用中，VS Code 抱怨说“React useEffect Hook 缺少依赖项”...dataState”。但是我当然不能将 dataState 放入依赖项数组中，因为它会导致无限循环。而且顺便说一下，dateState 是通过 useState Hook 管理的。这是我的 useEffect 钩子：

    //  If there is a new selected location from the treeview, update the grid state
useEffect(() => {
    const newState: State = {
        ...dataState,
        filter: {
            logic: 'and',
            filters: [
                {
                    field: 'location',
                    operator: 'contains',
                    value: selectedLocation,
                },
            ],
        },
    };
    setDataState(newState);
}, [selectedLocation]);

如有任何帮助，我们将不胜感激。

Answer 1

尝试这样设置 dataState：

useEffect(() => {
    setDataState(oldDataState => ({
        ...oldDataState ,
        filter: {
            logic: 'and',
            filters: [
                {
                    field: 'location',
                    operator: 'contains',
                    value: selectedLocation,
                },
            ],
        },
    }));
}, [selectedLocation]);

这样它将被视为 parameter 而不是依赖项。

Answer 2

实际上，"...dataState" 未在您的 B 组件中定义。所以它显示 缺少依赖关系 你需要这样的参考：

useEffect(() => {
     setDataState(dataState=> ({...dataState, filter: {
            logic: 'and',
            filters: [
                {
                    field: 'location',
                    operator: 'contains',
                    value: selectedLocation,
                },
            ],
        },
    }));
}, [selectedLocation]);

Answer 3

您也可以通过创建另一个状态来实现

const [newDataState,setNewDataState]=useState();
useEffect(() => {
    const newState: State = {
        ...dataState,
        filter: {
            logic: 'and',
            filters: [
                {
                    field: 'location',
                    operator: 'contains',
                    value: selectedLocation,
                },
            ],
        },
    };
    setNewDataState(newState);
}, [selectedLocation,datastate]

);

现在在第二个 useEffect 中使用 newDataState 作为依赖项并设置原始状态的状态。

useEffect=()=>{
    setDataState(newDataState);

},[newDataState]

React useEffect Hook 抱怨缺少依赖

React useEffect Hook complains about missing dependency

reactjs

react-hooks

use-effect