React中使用展开运算符更新对象数组状态时的问题

嘿，我来帮你排查下这个问题～你遇到的核心问题是**setState的回调函数写法错误**，导致你在错误的时机打印了state，所以看到的是空数组。

为什么你的写法不对？ #

你现在的代码是：

this.setState({ languages: [...langs] }, console.log(this.state.languages); );

这里的第二个参数你直接写了console.log(this.state.languages)，这会让JS立刻执行这个console.log（此时setState还没完成状态更新，所以拿到的是旧的空数组），然后把console.log的返回值undefined传给setState当回调——等于根本没设置有效的更新后回调。

正确的写法 #

你需要把回调写成一个箭头函数（或普通函数），这样setState完成状态更新后才会调用这个函数，此时就能拿到最新的state了：

this.setState({ languages: [...langs] }, () => {
  console.log(this.state.languages); // 这里就能正确打印更新后的数组啦
});

额外补充：如果是合并数组而非替换 #

如果你原本的state.languages已有数据，想要把langs合并进去（而不是直接替换），建议用函数式的setState，因为setState是异步操作，依赖之前的state时用函数式更可靠：

this.setState(prevState => ({
  languages: [...prevState.languages, ...langs]
}), () => {
  console.log(this.state.languages);
});

内容的提问来源于stack exchange，提问作者cbutler