如何在 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>

Answer 2

首先，如果newdiscoverPlanet 是常量，则它不应该处于该状态（文件常量或静态成员、实例甚至道具成员都可以，但它并不是组件的真正状态）。

那么根据我对您的问题的理解，您似乎想要随机选择 newDiscoverPlanet 而不仅仅是一个。

从我从评论中读到的内容看来，您似乎还需要为每个行星导入图像文件。

那又怎样：

    import sunpImg from '../img/sunp.png';
    import twopImg from '../img/twop.png';
    import bluepImg from '../img/bluep.png';
    import purplepImg from '../img/purplep.png';
    import bluepurplepImg from '../img/bluepurplep.png';
    import redpImg from '../img/redp.png';
    import orangepImg from '../img/orangep.png';

    const planetsObj = [
        { name:'sunp', img: sunpImg },
        { name:'twop', img: twopImg },
        { name:'bluep', img: bluepImg },
        { name:'purplep', img: purplepImg },
        { name:'bluepurplep', img: bluepurplepImg },
        { name:'redp', img: redpImg },
        { name:'orangep', img: orangepImg },
    ];

    class YouComponent extends Component {

        state = {
            randomPlanets: this.getRandomPlanets()
        }
        getRandomPlanets() {
            // Note: since the randomization relies on random sorting
            // you won't have the same planet twice, if you want a 
            // subset (less planets) just use .slice(numOfItem)
            return [...planetsObj].sort(() => parseInt(Math.random() * 3, 10) - 1);
        }
        updateRandomPlanets() {
            this.setState(() => ({ randomPlanets: this.getRandomPlanets() }));
        }
        render() {
            const { randomPlanets } = this.state;
            // Note: if you randomize during render the renders
            // won't be consistent and the display won't be controllable
            return (
                {randomPlanets.map(planet => (
                    <div>
                        <img src={planet.img} />
                        <Text>{planet.name}</Text>
                    </div>
                ))}
            );
        }
    }