在React中提交表单时将对象添加到数组中

Question

我是React的新手，我试图在提交表单时将对象逐个添加到处于状态的数组中，但是我在数组中仅得到一个对象，这是该代码段：

我的州

state = {
    comments: [],
    text: ""
  };

提交表单

 handleSubmit = event => {
    event.preventDefault();
    const arr = [];
    arr.push({ name: this.state.text, id: Math.random() });
    this.setState({ comments: arr, text: "" });
  };

RENDER METHOD

<form onSubmit={this.handleSubmit}>
          <input
            type="text"
            value={this.state.text}
            onChange={e => this.setState({ text: e.target.value })}
          />
          <ul>{this.renderComments()}</ul>
        </form>

Answer 1

这是因为每次调用handleSubmit时，都会将arr初始化为一个空数组，删除arr数组，并在提交时传播注释数组并添加该项

         handleSubmit = event => {
        event.preventDefault();
     this.setState({comments: [...this.state.comments,{ name:this.state.text, id: Math.random() }
   ],text: ""});};

CodeSandbox here

Answer 2

那是因为每次您运行handleSubmit函数时，您都会创建一个新的空数组，将一个新的注释推入该数组，然后将其状态替换为整个注释字段。要使其工作，只需从状态读取当前保存在注释数组中的内容，然后将其推送到它，而不是创建新的。