用空对象反应本机setState更新数组

Question

我有一个构造如下的类：：

  constructor(props) {
    super(props);
    this.state = {
      name: '',
      guestsStore:[],
    };
  }

我有一个接受文本输入的表单，应该通过调用this.handleNameSubmit

将提交的名称添加到guestStore数组中。

即使我在多个代码示例中都看到了以下代码，也无法使用。它更新状态，但带有空对象-：

  handleNameSubmit = (name) => {
    this.setState({
      guestsStore: [...this.state.guestsStore, name],
    });
  };

以下代码可以正常工作并使用名称更新状态。

handleNameSubmit = (name) => {
    this.setState({
    guestsStore:[...this.state.guestsStore, {name:this.state.name}],
    })
  }

我是React Native的新手，我想了解为什么会这样。为什么在这种情况下第一个代码示例即使在很多其他情况下仍然有效，仍会失败

Answer 1

这两种方法完成不同的事情。

 handleNameSubmit = (name) => {
     this.setState({
         guestsStore: [...this.state.guestsStore, name],
     });
 };

此代码将字段name: name添加到扩展数组this.state.guestsStore中，然后将该数组组装到新状态的guestsStore中。

handleNameSubmit = (name) => {
    this.setState({
        guestsStore:[...this.state.guestsStore, {name:this.state.name}],
    })
}

此代码将具有字段的对象{name: this.state.name}添加到扩展数组this.state.guestsStore中，然后将其组装到新状态的guestsStore字段中。

您需要确保您了解两者之间的区别，并根据情况使用所需的一种。