React useEffect Hook 抱怨缺少依赖答案

【问题标题】：React useEffect Hook complains about missing dependencyReact useEffect Hook 抱怨缺少依赖
【发布时间】：2021-12-19 08:12:40
【问题描述】：

我有两个相互通信的组件。在组件 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]);

任何帮助将不胜感激。

【问题讨论】：

标签： reactjs react-hooks use-effect

【解决方案1】：

尝试像这样设置dataState：

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

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

【讨论】：

【解决方案2】：

你也可以通过创建另一个状态来做到这一点

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]

【讨论】：

【解决方案3】：

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

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

【讨论】：