react-native将两个数组合并为一个

Question

我试图让用户选择他们的兴趣（即食物，体育），然后将其显示在用户个人资料页面上。

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

所以例如，我想在屏幕上显示Interest: pizza, hotdog, basketball, surfing。

我遇到的问题是我无法合并两个阵列（食物和运动）。

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]我怎么能合并这两个数组并把它放在interest:[]array？

此外，当我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 spread运算符

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

Answer 2

您可以使用数组concat

function concatArray(){
  let food=this.state.food;
  let sports=this.state.sports;
  let interest=[];
  interest.concat(food);
  interest.concat(sports);
  this.setState({interest:interest});
}

对于你的第二个问题，

您正在将参数传递给函数并将状态更改为toggle1和toggle2。更改参数或预定义构造函数中的状态。

我也想澄清这会改变国家的价值。但是console.log（this.state.sports）不会记录更新的值，因为更改将在一个时钟周期后受到影响，并且console.log将在此之前发生。

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