Как получить другой результат с тем же вызовом состояния в React Native?

Приношу свои извинения за сумбурную формулировку вопроса. В основном, когда я вызываю состояние отсюда:

    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) это кажется слишком длинным для чего-то, что может иметь более простое решение.

Можете ли вы опубликовать свой объект полного состояния? Ваше текущее состояние не имеет свойства currentPlanet `.

Atin Singh 08.03.2019 13:31
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
1
53
2

Ответы 2

Не помещайте случайно сгенерированное имя в состояние, а вместо этого вызовите функцию для генерации случайного имени несколько раз в вашей функции 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>

Спасибо, но мне трудно понять это: require("../img/" + this._getRandomPlanet() + ".png"). Есть ли способ, которым я могу поместить функцию в require вот так?

Laney Williams 08.03.2019 13:42

Я думаю, вы можете импортировать все изображения планет, а затем выбрать то, которое вам нужно, в соответствии со случайно сгенерированным именем.

Arnaud Christ 08.03.2019 13:48

Я думаю, вы должны поместить случайно сгенерированное имя в состояние, потому что в противном случае вы не сможете контролировать, когда набор планет рандомизируется, и каждый раз, когда родительский рендеринг, набор планет будет меняться.

remix23 08.03.2019 13:56

Согласен. Если важно сохранить случайно сгенерированные значения, вам следует рассмотреть решение remix23.

Arnaud Christ 08.03.2019 14:00

@LaneyWilliams Вы не можете динамически требовать в react-native.

Andrew 08.03.2019 17:15

Прежде всего, если 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>
                ))}
            );
        }
    }

Вы не можете динамически запрашивать значения в react-native. Так что это решение не будет работать

Andrew 08.03.2019 17:13

Спасибо @Andrew, сегодня я узнал. Я также обновил ответ статическим импортом. Импорт также может быть предварительно создан или, возможно, существует решение для динамического импорта для нативного реагирования, но это другая история...

remix23 08.03.2019 17:29

Другие вопросы по теме