javascript - 如何在 React Native 中使用相同的状态调用获得不同的结果？

Question

对于问题的措辞令人困惑，我深表歉意。基本上当我从这里调用状态时:

    this.state = {
     newdiscoverPlanet: [
      'sunp',
      'twop',
      'bluep',
      'purplep',
      'bluepurplep',
      'redp',
      'orangep'

    ],
};

_getRandomPlanet(){
  var planetItem = this.state.newdiscoverPlanet[Math.floor(Math.random()*this.state.newdiscoverPlanet.length)];
  this.setState({
    currentPlanet: planetItem,
  });
}

如何从同一状态获得不同的结果？

<Text>{this.state.currentPlanet}</Text>
<Text>{this.state.currentPlanet}</Text>
<Text>{this.state.currentPlanet}</Text>

我知道我可以用 newdiscoverPlanet 的所有项目再添加两个不同的状态，但是 1) 我有机会获得相同的结果 2) 对于可能有更简单的解决方案。

Answer 1

不要将随机生成的名称放入状态中，而是在 render 函数中多次调用函数来生成随机名称。

基本上类似的东西应该可以解决问题:

_getRandomPlanet(){
  var planetItem = this.state.newdiscoverPlanet[Math.floor(Math.random()*this.state.newdiscoverPlanet.length)];
  return planetItem
}

在你的 JSX 中:

<Text>{this._getRandomPlanet()}</Text>
<Text>{this._getRandomPlanet()}</Text>
<Text>{this._getRandomPlanet()}</Text>