如何更新设置状态的对象数组[重复]

Question

`正在尝试更新onclick中的对象数组。我有两个状态，即数组格式的“IntialValue”和“Todos”。当我检查react developer工具时，我可以看到有两种状态。该任务的流程是用户可以在输入文本框中输入文本，一旦用户点击了添加按钮，我想把它添加为对象数组，我保留了一个布尔字段和Id字段。我面临的问题是我能正确地得到“InputValue”。我还得到了对象的数组，但不是在“todos”状态，并且这些值不是以数组格式更新的，只是改变了输入值。例如：0{completed：false,id:20,text：abc}当我单击add按钮时，数组不会更新为1{completed：false,id:20,text：cde}，而是在第0个位置更新值。我已经添加了下面的代码，任何一个可以帮助我实现输出。提前道谢。

class TodoForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      InputValue: "",
      todos: [],
    };
    console.log("intialvalue", this.state.InputValue);
  }

  handleChange(e) {
    this.setState({ InputValue: e.target.value });
  }

  handleSubmit(e) {
    //   alert("Form state value" + this.state.initalValue);
    e.preventDefault();
    this.setState([
      ...this.state.todos,
      {
        text: this.state.InputValue,
        completed: false,
        id: Math.random() * 1000,
      },
    ]);
  }
  render() {
    return (
      <div className="Todo">
        <form>
          <input
            type="text"
            value={this.state.InputValue}
            onChange={this.handleChange.bind(this)}
          ></input>
          <button onClick={this.handleSubmit.bind(this)}>Add</button>
        </form>
        <p>{this.state.InputValue}</p>
      </div>
    );
  }
}

export default TodoForm;

Answer 1

您需要更新todo状态（不是完全状态）。您没有正确更新状态。应该是这样的：

this.setState({
      todos: [
        ...this.state.todos,
        {
          text: this.state.InputValue,
          completed: false,
          id: Math.random() * 1000
        }
      ]
    });

下面是演示：https://codesandbox.io/s/gracious-mountain-rdubi？file=/src/app.js