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

Posted 2023-02-22

【中文标题】反应原生如何将两个数组与函数合并

【英文标题】：react native how to merge two arrays with a function

【发布时间】：2019-02-07 13:14:03

【问题描述】：

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

    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 因为我想我在渲染发生之前调用它。

我应该用另一种方法来合并数组吗？ 任何建议或 cmets 都会非常有帮助。在此先感谢:)

【问题讨论】：

何时何地调用合并这些状态的函数？

我编辑了我的文本。请看一下谢谢！

代码和问题很不一致。例如，您对单个变量使用 3(!) 个不同的名称：food、toggle1 和 toggle1Text。

@Finesse 我的错误。我编辑了代码。

不过，我看不出你在哪里做这个作业并使用它。

【参考方案1】：

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

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

Reference

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

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

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

【讨论】：

非常感谢，它运行良好。现在在控制台中我看到了合并的数组。

但是如何在 render() return() 中调用合并数组？

@kirimi 里面render 这样：const interest = [...this.state.food, ...this.state.sports];。 render 方法必须能够呈现任何可能的组件状态，因此请创建一个 if 语句，当值未定义时呈现其他内容。

@kirimi 或者为状态项添加一个默认值。根据您的问题，this.state.food 和 this.state.sports 都不能在任何时候未定义（如果给定方法的值）。

【参考方案2】：

推入数组中的多项

合并两个数组

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


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

subject1.push(...subject)

console.log(subject1);

//output

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