在对象数组的 react setState 中使用扩展运算符

Question

我有一个对象数组（语言代码和名称），我正试图将它们传播到 React 组件中处于本地状态的另一个数组中。我试图传播的数组结构是这样的：

let langs = [
  {code: "af", name: "Afrikaans"},
  {code: "sq", name: "Albanian"}
]

我正在尝试这样简单的事情：

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

当我在 setState 的回调中尝试 console.log 语言时，数组为空。这里做错了什么？

Answer 1

第二个参数是回调 - 您将立即执行 console.log 并将其结果作为回调传递。将您的代码更改为：

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

Answer 2

setState是异步的，需要在回调中调用函数。

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

using the spread operator in react setState on array of objects