javascript - 在 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: "" });
  };

渲染方法

<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函数时，您都会创建新的空数组，将一条新评论插入其中，然后用它替换状态中的整个评论字段。要使其工作，只需从状态中读取注释数组中当前保存的内容并将其插入其中，而不是创建新的。