javascript - React-Native 将两个数组合并为一个

Question

我试图让用户选择他们的兴趣(即食物、运动)，然后将其显示在用户个人资料页面上。

我有两种不同的观点。其中一个是用户选择他们最喜欢的食物，在下一页中用户可以选择他们最喜欢的运动。

例如，我想在屏幕上显示兴趣:披萨、热狗、篮球、冲浪。

我遇到的问题是我无法合并两个数组(食物和运动)。

class UserInterest extends Component {
    constructor(props){
       super(props)
       this._favoriteFood = this._favoriteFood.bind(this)
       this._favoriteSports = this._favoriteSports.bind(this)

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

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

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

render(){
 const {toggleText1} =this.state
 const {toggleText2} =this.state

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

如果我有两个数组 food:[pizza, hotdog] 和 sports:[basketball, surfing] 我如何合并这两个数组并将其放入 兴趣:[]数组？

此外，当我 console.log(food) 时，我得到数组数据，但是当我 console.log(this.state.food) 时，我得到一个空数组。这些不应该是一样的吗？我很困惑。

如有任何建议或意见，我们将不胜感激，提前致谢!

Answer 1

您会看到空数组，因为当您从另一个组件调用它时，您的函数丢失了上下文，并且 this 包含这些组件(FavoriteSports、FavoriteFood 等)。因此，您需要巩固 UserInterest 组件的上下文。您可以使用箭头函数来实现

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

对于合并数组，您可以使用 es6 扩展运算符

const interest = [...food, ...sports];