Получить уникальный элемент из списка в реагировать родной?

Question

Вот мой список:

newdiscoverPlanet: [
  require('../img/sunp.png'),
  require('../img/twopp.png'),
  require('../img/bluep.png'),
  require('../img/purplep.png'),
  require('../img/bluepurplep.png'),
  require('../img/redp.png'),
  require('../img/orangep.png')

],

Я помещаю все это в функцию, затем использую Math здесь:

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

И затем я помещаю их во вкладки, чтобы получитьуникальное изображение из списка:

    _renderTabIndicator() {
       let tabs = [{
               text: `${this.state.tags.toLowerCase()}`,
               iconSource: `${this.state.changePlanet}`
           },{
               text: `${this.state.tags2.toLowerCase()}`,
               iconSource: `${this.state.changePlanet}`
           },{
               text: `${this.state.tags3.toLowerCase()}`,
               iconSource: `${this.state.changePlanet}`
       }];
       return <PagerTabIndicator tabs={tabs} />;
   }

Но каждый раз, когда я загружаю страницу, я получаю одно и то же изображение из каждого источника.Есть ли способ сделать их уникальными?Как я могу сделать что-то подобное в React Native: https://stackoverflow.com/a/2380113/9318643

Answer 1

Проблема в том, что вы обращаетесь к одному и тому же значению (this.state.changePlanet) 3 раза и ожидаете другого результата.Я думаю, вам просто нужно сделать метод return случайной планетой так:

getRandomPlanet = () => {
  return this.state.newdiscoverPlanet[Math.floor(Math.random()*this.state.newdiscoverPlanet.length)];
}

, тогда вы можете вызвать это 3 раза, и вы получите 3 разных изображения:

_renderTabIndicator() {
       let tabs = [{
               text: `${this.state.tags.toLowerCase()}`,
               iconSource: this.getRandomPlanet()
           },{
               text: `${this.state.tags2.toLowerCase()}`,
               iconSource: this.getRandomPlanet()
           },{
               text: `${this.state.tags3.toLowerCase()}`,
               iconSource: this.getRandomPlanet()
       }];
       return <PagerTabIndicator tabs={tabs} />;
   }

---

Редактировать : Если вы хотите убедиться, что не выбраны две одинаковые планеты, вы можете сделать что-то вроде этого:

getRandomPlanets = (n) => {

  // Shuffle array
  const shuffled = this.state.newdiscoverPlanet.sort(() => 0.5 - Math.random());

  // Get sub-array of first n elements after shuffled
  let selected = shuffled.slice(0, n);
  return selected;
}

и затем позвонить:

_renderTabIndicator() {
  const planets = this.getRandomPlanets(3);
  let tabs = [{
                   text: `${this.state.tags.toLowerCase()}`,
                   iconSource: planets[0]
               },{
                   text: `${this.state.tags2.toLowerCase()}`,
                   iconSource: planets[1]
               },{
                   text: `${this.state.tags3.toLowerCase()}`,
                   iconSource: planets[2]
           }];
           return <PagerTabIndicator tabs={tabs} />;
       }