useState 钩子的 setState 的功能版本不会导致重新渲染

Question

我的网页中有一个组件，用户可以在其中重复一个表单，即在另一个表单下方添加一个表单。我通过在表单之外添加一个加号图标来实现这一点。这个想法是我将存储一个表单对象，该对象将包含我所在州的每个表单的所有字段值。当用户添加新表单时，我将在单击添加按钮的表单的索引之后添加一个表单对象。

代码sn-p：

const singleFormValues = {
    email: "",
    first_name: "",
    last_name: "",
    role: Object.keys(roles)[1],
};

const [formValue, setFormValue] = useState([singleFormValues]);

const handleAddForm = (addAfterIndex) => () => {
    setFormValue(prevFormValue => {
        prevFormValue.splice(addAfterIndex, 0, singleFormValues);
        console.log({
            prevFormValue
        })
        return prevFormValue;
    });
}

如您所见，我创建了 formValue 这是一个数组，它将用于呈现表单。 问题在于 setFromValue 的功能形式，由于某些原因，当我单击添加按钮 handleAddForm 被执行时，console.log 打印正确的值，即，一个额外的对象被添加到formValue 但是我的组件没有重新渲染。这让我相信状态没有得到更新，但它是不真实的，因为每次我点击添加按钮时，一个新的对象被添加到状态中。

谁能指出它有什么问题？

Answer 1

直接的问题是您正在改变先前的状态，然后返回相同的引用。只有当您返回对新对象的引用时，您的组件才会重新渲染。在这种情况下，你可以浅拷贝你之前的状态并改变浅拷贝：

setFormValue(prevFormValue => {
  let shallowCopy = [...prevFormValue];
  shallowCopy.splice(addAfterIndex, 0, singleFormValues);
  return shallowCopy;
});

其次（取决于setFormValue 的调用方式），您将返回一个函数而不是设置状态。您可能需要删除退货：

const handleAddForm = addAfterIndex => {
  setFormValue(prevFormValue => {
    let shallowCopy = [...prevFormValue];
    shallowCopy.splice(addAfterIndex, 0, singleFormValues);
    return shallowCopy;
  });
};