反应原生如何将两个数组与函数合并

Question

我有两个函数，当我按下每个函数时，我创建了一个数组。

    this.state = {
            food:[],
            sports:[],
            interest:[],   
        } 

         _favoriteFood(foodState){
            const food = foodState
            this.setState({food:food})
            console.log(food)
            console.log(this.state.food)
          }

         _favoriteSports(SportsState){
            const sports = SportsState
            this.setState({sports:sports})
            console.log(sports)
            console.log(this.state.sports)
          }
render(){


return (
<View>
      <FavoriteFood favoriteFood={this._favoriteFood}/>
</View>
       <View>
             <FavoriteSports favoriteSports={this._favoriteSports}/>
       </View>
)}

因此，例如，我越来越像数组food:[pizza, hodog]和sports:[basketball, surfing]当我打电话按一个按钮的方法。

我的问题是当我尝试合并两个数组时：

const interest = [...this.state.food, ...this.state.sports]

它显示undefined是因为我认为我在渲染发生之前调用它。

我应该使用另一种方法来合并数组吗？任何建议或意见都会非常有帮助。提前致谢 ：）

Answer 1

您的问题可能会发生，因为 React 不会在您调用时立即更改状态setState，它可能会在稍后更改状态。如果您想在 React 应用更改后访问状态，您应该使用该setState方法的第二个参数：

_favoriteFood(food){
  this.setState({food}, () => {
    const interest = [...this.state.food, ...this.state.sports];
  });
}

参考

另一种解决方案是使用您的方法参数，而不是从 读取相同的值this.state：

_favoriteFood(food){
  this.setState({food});
  const interest = [...food, ...this.state.sports];
}

顺便说一句，你不应该const interest = [...this.state.food, ...this.state.sports]在状态中存储，因为它可以从其他状态变量中导出。

Answer 2

在数组中推送多个项目

合并两个数组

var subject1=['item1','item2']


var subject=['item3','item4','item5'];

subject1.push(...subject)

console.log(subject1);

//output

['item1', 'item2', 'item3', 'item4', 'item5']