从反应原生列表中获取唯一项目？答案

【问题标题】：Get a unique item from list in react native?从反应原生列表中获取唯一项目？
【发布时间】：2019-08-01 03:17:52
【问题描述】：

这是我的清单：

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

【问题讨论】：

这有点令人困惑..您是否希望 this.state.changePlanet 为每个选项卡设置不同的值？
@azium 是的，我是
这就像说var a = 1 然后期望a 不等于1。您不是在设置 3 个不同的值，而是在设置一个值并使用该值 3 次。您不需要任何状态，您可以调用this.state.newdiscoverPlanet[Math.floor(Math.random()*this.state.newdiscoverPlanet.length)] 其中iconSource 是... iconSource: <put it here>
请注意，这会给您带来不同的价值观，不一定是独一无二的。但你应该从那里开始
但是在不同的 iconSource 中图像不会有相同的可能性吗？

标签： javascript arrays reactjs react-native jsx

【解决方案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} />;
       }

【讨论】：