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

Question

My apologies for the confusing wording of the question. Basically when I call state from here:

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

How do I get a different result from the same state?

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

I know I could just add two more different states with all the items of newdiscoverPlanet but 1) I have a chance of getting the same results 2) It seems too lengthy for something that might have an easier solution.

Answer 1

Don't put the randomly generated name in the state, but instead, call the function to generate a random name multiple times in your render function.

Basically something like that should do the trick:

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

And in your JSX:

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

Answer 2

First of all if newdiscoverPlanet is constant it shouldn't be in the state (a file constant, or static member, an instance or even a prop member would do but it's not really a state of the component).

Then from what I understand of your questions it seems that you want a random selection of newDiscoverPlanet instead of just one.

And from what I read from a comment it also seems that you need to import image files for each planet.

So what about:

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