Question

问题的症结在于：如何使用上下文中的数据触发useEffect？

据我所知，钩子的规则必须都在函数的顶部，所以这可能是违反的，对吗？

export const MyComponent = () => {
    const appContext = useContext(AppContext);
    const {dispatch, state} = appContext;  // destructuring in front of another hook
    useEffect(()=>{
        // Do something with state here
    }, [state]);
}

我可以想到的在不直接将状态直接传递为道具的情况下执行此操作的另一种方法是使用局部组件状态，但这对我来说真的很可怕。

export const MyComponent = () => {
    const appContext = useContext(AppContext);
    const [state, setState] = useState({});
    useEffect(()=>{
        const {_state} = appContext;
        setState(_state);
    },[]);
    useEffect(()=>{
        // Do something with state here
    }, [state]);

    const {dispatch} = appContext;
}

我感谢所有建议。谢谢你。

Answer 1

在两个钩子之间具有破坏性声明并不违反钩子规则。挂钩状态规则是Only Call Hooks at the Top Level而不是Only Call Hooks at the Top of function

这个想法是您在loops, conditions, or nested functions

中没有钩子

您需要注意的是，在每次渲染该组件时，钩子的总数保持不变。

因此下面的代码是完全有效和正确的代码

export const MyComponent = () => {
    const appContext = useContext(AppContext);
    const {dispatch, state} = appContext;  
    useEffect(()=>{
        // Do something with state here
    }, [state]);
}

我可以在不违反React Hooks规则的情况下对React Context进行结构化以在useEffect中使用吗？

1 个答案: