Question

我正在处理具有多个表单元素的React表单，并提供重复整个表单的选项。基本上，添加更多按钮可添加新的表单块。

要跟踪多个表单，我在另一个文件中创建了一个formModel对象，并将其导入到组件的反应中。

var formModel = {
    counter : 0,
    formElements : {
        text1 : '',
        text2 : '',
        select1: '',
        radio: ''
    }
};

export default formModel;

在处理表单的组件中，我导入该表单并使用此formModel的1个对象初始化状态，因为我需要显示至少一个表单块。我有一个添加模式/删除选项，可以在其中添加/删除表单块。

class FormComponent extends React.Component {

    constructor(){
      super()
      this.state = {
        formList: [formModel]   
      };
    }

    addAnother(){
        let nextFormList = this.state.formList;
        nextFormList.push(formModel);
        this.setState({
            formList: nextFormList
        });
    }


    render() {
      return (
        //I map over the formList and send my form state as props into a formElement component
      );
    }
  }

我的问题是，当我尝试在addAnother方法中将formModel的新对象添加到处于状态的formList数组中时，它会不断添加相同的formModel初始副本。

我无法创建formModel对象的新副本并继续推送相同的副本。

我猜想创建无法实现的对象的基本JS概念。

Answer 1

使用状态时应避免的两件事：

Do not mutate objects in the current state 。始终创建新对象以更新状态。您可以为此使用散布运算符。
Calls to setState are asynchronous - don’t rely on this.state to reflect the new value immediately after calling setState 。请改用setState()的回调版本。反应批处理更新，更新发生时this.state不包含先前计划的更新中的数据，并且可能会覆盖它们。

示例：

addAnother(){
    this.setState(oldState => ({
        formList: [...oldState.formList, formModel]
    }));
}

创建并将新对象推送到反应状态数组

1 个答案: