Question

这里是一些带有两个输入字段和两个不同处理程序的简化组件：

const component = ({ data, onUpdate }) => {
  const handleChangeName = useCallback(e => {
      onUpdate({ ...data, name: e.target.value });
    }, [data],
  );

  console.log('1 here is data with updated name', data);
  const handleChangeSomeProp = useCallback(anotherProp => {
      console.log('2 here is data with empty name', data);
      onUpdate({ ...data, anotherProp: anotherProp });
    }, [data],
  );

  ... some UI components
}

第一个输入：正在更新名称 - 一切正常
第二个输入：当我开始在另一个字段上输入时 - 第一个控制台日志显示正确的数据，但第二个控制台日志显示没有名称的空数据，因此它将状态更新为空 data 并且第一个字段再次变为空< /li>

所以问题是为什么 useCallback 使用旧值以及如何解决这个问题。

Answer 1

因为它记住了您可以使用 useRef 解决此问题，但最好修复您的钩子重新渲染过程

来自 props 的 UseCallback 缓存依赖

1 个答案: