Вызов переменной из fetch в функцию рендеринга React - PullRequest
Новая
       10

Вызов переменной из fetch в функцию рендеринга React

0 голосов
/ 26 мая 2018

Я сопоставляю массив витаминов из json и хочу вернуть имя каждого Витамина в массиве в раскрывающемся меню при нажатии.

Я думал, что смогу объявить переменную constв функции выборки, и используйте это в моем JSX. 

  componentDidMount() {
    fetch('/users')
    .then(res => res.json())
    .then(micros => micros.vitamins.map((micro) => {
      const microVit = micro;
    }))
  }

  render() {
    return (
     <form>
        <label className="nutrient-label">
          Vitamins
        </label>
       <select value={this.props.value} onChange={this.handleChange}>
         <option value="" selected>--Vitamins--</option>
         {microVit.map((vitamin, index) =>
           <option value={vitamin.value} key={index}>{vitamin.name}</option>
         )}
       </select>
    </form>
   )
  }

Когда я console.log (microVit) в функции выборки, я получаю массив витаминов.Это просто не переносится на функцию map, которую я пытаюсь использовать в операторе return моей функции render.

Ответы [ 2 ]

0 голосов
/ 26 мая 2018

Ваш const microVit инкапсулирован.

Переместите деклирацию за пределы вашего компонента, который идеально монтировал метод во внутреннее состояние или в хранилище с избыточностью.

0 голосов
/ 26 мая 2018

Вам необходимо сохранить его в состоянии и обновить его с помощью setState, чтобы повторно обработать компонент с новыми данными: 

class ... {
  state = { microVit: [] }

  componentDidMount() {
    ...
    .then(({ vitamins }) => this.setState({ microVit: vitamins })
  }

  render() {
    ...
      {this.state.microVit.map(...
...