Reactjs 使用props中的回调缓存依赖项

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

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
}

第一个输入：更新名称-一切正常

第二个输入：当我开始在另一个字段上键入时-第一个控制台日志显示正确的数据，但第二个控制台日志-显示没有名称的空数据，因此它将状态更新为空

数据

，第一个字段再次变为空

所以问题是为什么useCallback使用旧值以及如何修复它。

因为它会记忆

---

您可以使用

useRef

解决这个问题，但最好修复钩子重新加载过程

它认为这是因为它被存储，并且它使用引用uquality来确定是使用新值还是旧值。