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是常量，则不应处于状态（文件常量，静态成员，实例甚至是prop成员都可以，但实际上不是组件的状态）

然后，根据我对您的问题的了解，您似乎希望随机选择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>
                ))}
            );
        }
    }

在React Native中如何通过相同的状态调用获得不同的结果？

2 个答案: