useToggle提问

[JunlinZhu-Tommy]

问题

useToggle 的 defaultValue 和 reverseValue 作为 props 传入时，如果这些值发生变化，setLeft 和 setRight 仍然使用初始值。

示例代码

import { useToggle } from 'ahooks';
import { useState } from 'react';

function App() {
  const [parentValue, setParentValue] = useState('A');
  
  return (
    <div>
      <button onClick={() => setParentValue(parentValue === 'A' ? 'B' : 'A')}>
        切换: {parentValue}
      </button>
      <Child leftValue={parentValue} />
    </div>
  );
}

function Child({ leftValue }) {
  const [value, { setLeft }] = useToggle(leftValue, 'OFF');
  
  return (
    <div>
      <p>当前值: {value}</p>
      <p>leftValue prop: {leftValue}</p>
      <button onClick={setLeft}>setLeft</button>
    </div>
  );
}

复现步骤

1. 点击 "切换" 按钮，parentValue 从 'A' 变为 'B'
2. 点击子组件的 "setLeft" 按钮
3. 期望：value 变为 'B'
4. 实际：value 仍为 'A'（使用了初始值）

问题

这是预期的行为吗？如果需要响应动态 props 变化，应该如何处理？

[LonelyFellas]

肯定不会。请看源码。本质上你演示的defaultValue字段，其实是放在useState(defaultValue)当作初始值，基本他是State，是不会影响后续的改变的。而你reverseValue 是放在React.useMemo里面做逻辑的复制，源码的中的useMemo函数的dependency是一个空数组，所以即便是reverValue是一个State值也是不会受影响的。