Параметры компонента «отреагировать» не применяются - PullRequest
Новая
       32

Параметры компонента «отреагировать» не применяются

0 голосов
/ 17 апреля 2019

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

Я получаю данные с сервера graphql с помощью response-apollo-hooks и пытаюсь передать некоторые данные опциям реагировать на выбор. Я проверил данные, и они были в порядке. Однако использование данных не работает (в компоненте «Показать» отображается «Нет параметров»), а объявление массива работает.

Я проверил, правильно ли я передал переменные между файлами, и получил правильные данные.

Вот мой код:

Conatiner.js 

const generated_list = [];
const listGenerator = () => {
  data.sample.map( single => {
    const temp = { label: single.A, value: single.B };
    generated_list.push(temp);
  }
}

где данные 

data.sample = [ { A: '1', B: '1', C: '1' }, { A: '2', B: '2', C: '2' } ]

Presenter.js 

<Button onClick={() => listGenerator()} text={'Get Lists'} />
<Select options={generated_list} />

Но следующий код работал, как я ожидал. 

const declared_list = { [label: '1', value: '1'], 
               [label: '2', value: '2'] };
...
<Button onClick={() => listGenerator()} text={'Get Lists'} />
<Select options={declared_list} />

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

console.log(
  typeof generated_list,
  generated_list`,
  JSON.stringify(generated_list),
  typeof declared_list,
  declared_list`,
  JSON.stringify(declared_list),
  JSON.stringify(generated_list) === JSON.stringify(declared_list),
);

Все было одинаково, и оператор === вернул true.

Я не знаю, что проверять дальше, поэтому любая помощь будет принята с благодарностью.

1 Ответ

0 голосов
/ 17 апреля 2019

Как подсказывает Сатиш Кумар в комментариях, изменения в массиве не влияют на React для запуска повторного рендеринга компонента.

Необходимо переместить массив в состояние и обновитьмассив this.setState (или, если вы используете функциональный компонент, используйте Reacts new Hooks ). 

class MySelect extends Component {
   state = {
      options: [],
   }

   populateArray = () => {
       var newOptions = [];

       /* Populate the `newOptions` array */

       this.setState({ options: newOptions });
   }

   render() {
       return (<>
           <Button onClick={this.populateArray}>Click me</Button>
           <Select { ... } options={this.state.options} />
       <>);
   }
}
...