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:[]数组中？

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];

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)
}

react-native将两个数组组合成一个

2 个答案: