如何在 React 中卸载时保存到自定义挂钩中的上下文？

Question

我有以下简化的自定义挂钩：

function useSpecialState(defaultValue, key) {
  const { stateStore, setStateStore } = useContext(StateStoreContext);

  const [state, setState] = useState(
    stateStore[key] !== undefined ? stateStore[key] : defaultValue
  );

  const stateRef = useRef(state);

  useEffect(() => {
    stateRef.current = state;
  }, [state]);

  useEffect(() => {
    return () => {
      setStateStore((prevStateStore) => ({
        ...prevStateStore,
        [key]: stateRef.current,
      }));
    };
  }, []);

  return [state, setState];
}

目标是在卸载时保存到上下文，但是此代码不起作用。

感谢您的阅读！

Answer 1

要解决这个问题，您可以使用 deps 数组来指定即使状态没有改变也应该调用 useEffect 钩子。 deps 数组应包含 useEffect 挂钩所依赖的变量。在这种情况下，useEffect 挂钩取决于状态变量。因此，您可以像这样更新 useEffect 挂钩：

function useSpecialState(defaultValue, key) {
  const { stateStore, setStateStore } = useContext(StateStoreContext);

  const [state, setState] = useState(
    stateStore[key] !== undefined ? stateStore[key] : defaultValue
  );

  const stateRef = useRef(state);

  useEffect(() => {
    stateRef.current = state;
  }, [state]);

  useEffect(() => {
    return () => {
      setStateStore((prevStateStore) => ({
        ...prevStateStore,
        [key]: stateRef.current,
      }));
    };
  }, [state]);

  return [state, setState];
}