reactjs - 即使添加到 useEffect 中，从自定义 Hook 发出的状态更改也不会导致重新渲染

Question

我有一个自定义钩子(Hook)，它保留了一个切换状态列表，当我看到内部状态与我的期望一致时，我想知道为什么一个监听这个钩子(Hook)保持的状态变化的组件没有重新渲染关于改变。代码如下

const useToggle = () => {
  const reducer = (state, action) => ({...state, ...action});
  const [toggled, dispatch] = useReducer(reducer, {});
  const setToggle = i => {
    let newVal;
    if (toggled[i] == null) {
      newVal = true;
    } else {
      newVal = !toggled[i];
    }
    dispatch({...toggled, [i]: newVal});
    console.log('updated toggled state ...', toggled);
  };
  return {toggled, setToggle};
};

const Boxes = () => {
  const {setToggle} = useToggle()
  return Array.from({length: 8}, el => null).map((el,i) => 
  <input type="checkbox" onClick={() => setToggle(i)}/>)
  }

function App() {
  const {toggled} = useToggle()
  const memoized = useMemo(() => toggled, [toggled])
  useEffect(() => {
    console.log('toggled state is >>>', toggled) // am not seeing this on console after changes to toggled
  }, [toggled])

  return (
    <div className="App">
      <Boxes />
    </div>
  );
}

Answer 1

这是因为您使用的是 useToggle两次。

一次在App

Boxes 中的另一个.

当您在 Boxes 中调度操作时，它正在更新 toggled Boxes 的实例(其中未检索到)。

想想你的自定义钩子(Hook)，就像你如何使用 useState .当您使用 useState ，每个组件都有自己的状态。自定义钩子(Hook)也是如此。

所以有几种方法可以解决这个问题。

通过setToggle来自 App至Boxes通过螺旋钻

使用 Context API(或 Redux 或其他语句管理库来传递setToggle App 中的实例组件关闭)

这是一个螺旋钻的例子。
你可以跟着

const Boxes = ({ setToggle }) => {
  // const { setToggle } = useToggle();
  return Array.from({ length: 8 }, el => null).map((el, i) => (
    <input key={i} type="checkbox" onClick={() => setToggle(i)} />
  ));
};

function App() {
  const { toggled, setToggle } = useToggle();

  useEffect(() => {
    console.log("toggled state is >>>", toggled); // am not seeing this on console after changes to toggled
  }, [toggled]);

  return (
    <div className="App">
      <Boxes setToggle={setToggle} />
    </div>
  );
}

注意:我添加了 key Boxes中的 Prop 使用索引 i (顺便说一句，这是一种不好的做法)

您可以看到它现在按预期工作。