在 React 钩子中，如何将新创建的对象传递给状态对象？

Question

我如何将err传递给errors : {}此处？

const data = { name: "", errors: {} }
const [values, setValues] = useState(data)
const handleSubmit = () => {
     const err = validate();  // I receive an object in err
    setValues({ ...values, errors: err }) // I cant set err to //errors: {} above
}

Answer 1

从React DOCs - State Hook ，我们得到：

状态变量可以很好地保存对象和数组，因此您仍然可以将相关数据组合在一起。 但是，与类中的 this.setState 不同，更新状态变量总是替换它而不是合并它。

另外，来自Hooks FAQ ：

现在假设我们要编写一些逻辑，当用户移动鼠标时，该逻辑会改变left和top 。 请注意我们如何手动将这些字段合并到先前的状态对象中：

 function handleWindowMouseMove(e) { // Spreading "...state" ensures we don't "lose" width and height setState(state => ({ ...state, left: e.pageX, top: e.pageY })); }

因此，您目前的做法是正确的。

Answer 2

只有当方法validate()返回一个对象时，您提出的方式才可能validate() 。

如果validate()返回一个字符串、数组...赋值setValues({ ...values, errors: err })可能会中断，因为errors需要一个对象