Reactjs：有人可以向我详细说明这一行

Question

我在here

上读到了这一行

＆＃13;

＆＃13;

this.setState({ chats: [...this.state.chats, data], test: '' });

＆＃13;

＆＃13;

＆＃13;

我认为我们正在状态中保存聊天数组，... this.state.chat引用原始的聊天变量，然后我迷路了

Answer 1

代码更新了两个状态：

1. chats - 使用array spread从之前的chats和新data创建新数组。
2. test - 将测试更新为空字符串。这是原始代码中的拼写错误，应该是text。

传播示例：

const chats = [1, 2, 3];
const data = 4;
const newChats = [...chats, data];

console.log(newChats);

但是，由于状态是异步的，因此最好使用updater callback来更新状态，因为：

  

updater函数接收的prevState和props都是   保证是最新的。更新程序的输出很浅   与prevState合并。

更新示例：

this.setState((prevState) => ({ chats: [...prevState.chats, data], test: '' }));

Answer 2

此处状态由聊天数组组成，它们追加存储在数据变量中的新聊天对象状态。

this.state = {
      text: '',
      username: '',
      chats: []
    };
  }

因此，数据会在状态中存在的聊天数组末尾添加到聊天数组中。它正在增加状态聊天数组的大小。

this.setState({ chats: [...this.state.chats, data], test: '' });

希望你的疑点得到澄清。