Question

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

代码段：

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 这是一个数组，它将用于呈现表单。由于某些原因，当我单击添加按钮handleAddForm被执行时，问题出在 setFromValue 的功能形式上， 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;
  });
};

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

1 个答案: