reactjs - React useEffect Hook 抱怨缺少依赖

Question

我有两个相互通信的组件。在组件 AI 中，有一个位置列表，每当用户单击此组件中的某个位置时，它都会根据单击的位置过滤组件 B 中的属性列表。这行得通，到目前为止一切顺利。但是在组件 BI 中，使用 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]);

任何帮助，将不胜感激。

标签： reactjsreact-hooksuse-effect

Answer 1

尝试这样设置dataState：

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

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