React中如何通过setState用一个数组的内容更新另一数组？

1. 数组批量赋值是否适合用push？ #

• 单个push()方法每次只能添加一个元素到数组末尾，如果你要把整个数组的所有元素都添加到另一个数组，需要搭配扩展运算符使用：arr1.push(...arr2)。但你的场景是要提取原数组的value属性组成新数组，完全不需要用push，直接用map的返回值更符合语法规范。

2. 用map提取属性的正确写法 #

map方法本身会返回一个长度和原数组一致的新数组，新数组的每个元素就是每次遍历的返回值，不需要额外定义空数组在遍历逻辑里做push操作，你的代码可以直接简化为以下写法：

handleChange = (selectedOptions) => {
  // 直接通过map返回所有value组成的新数组
  const selectedTags = selectedOptions.map(v => v.value)
  // 批量更新state，不需要分两次调用setState
  this.setState({
    selectedOptions,
    selectedTags
  })
}

原代码说明 #

你之前的写法逻辑本身没有问题，如果运行时只能拿到一个值，大概率是传入的selectedOptions本身就只有一个元素，和push逻辑无关。但你现在的写法不符合map的设计定位：map是用来做数组元素转换的，不应该用来执行push这种副作用操作，这类遍历执行副作用的场景应该用forEach更合适。

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