Как передать полученный результат в виде параметров компонента в поток маршрутизатора? - PullRequest
Новая
       18

Как передать полученный результат в виде параметров компонента в поток маршрутизатора?

0 голосов
/ 15 марта 2019

Я пытаюсь передать параметры в компоненте панели вкладок в реактивном режиме с использованием маршрутизатора. Что я сделал, это извлеченный результат передается в виде параметров в компоненте внутри панели вкладок. Следующий код - мой код

Home.js 

fetch(GLOBAL.COURSES)
            .then((response) => response.json())
            .then((responseData) => {
                this.setState({
                    cats: responseData.data,
                    vdo: responseData.video,
                    isLoading: false
                })
            })

..
...
                     <Tabs>
                        <Tab
                            heading="Courses"
                        >
                            <Courses cats={this.state.cats} />
                        </Tab>
                     ...
                       ...
                  </Tabs>

И на странице Courses я пытаюсь получить этот реквизит, как 

 {this.props.cats.map(category =>

                           <View>
                           ....
                           ....
                           </View>
)}

Я получаю undefined is not an object evaluating this.props.cats.map .В чем заключается ошибка в моем коде, пожалуйста, помогите.

Ответы [ 3 ]

2 голосов
/ 15 марта 2019

Итак, когда ваш компонент рендерит первый раз, this.state.cats не определено.

Что вы можете сделать с вашим кодом:

  1. обернуть ваш вызов выборки в асинхронный вызов, т.е.Обещание.Например, 

//function
const fetchCats = async () => {
  const responseData = await fetch(GLOBAL.COURSES)
     .then((response) => response.json())
     .then((responseDataSuccess) => {
          return responseDataSuccess;
  });
  this.setState({
     cats: responseData.data,
     vdo: responseData.video,
     isLoading: false
  });
}

Или

для вашего компонента <Courses /> вы можете сделать так, чтобы он не отображался до тех пор, пока состояние автомобиля не достигнет требуемого значения, а также будет хорошей практикой инициализировать this.state = { cars: [] } 

import { get } from 'lodash';
// a utility set for javascript

<Tabs>
  <Tab heading="Courses" >
  {get(this.state, cats) && <Courses cats={this.state.cats} />}
  </Tab>
                     ...
                       ...
</Tabs>

PS сосредоточьтесь на управлении своим состоянием, и вы готовы идти.

0 голосов
/ 15 марта 2019

Вы пытаетесь перебрать массив cat, не получив ответа от службы.

Распространенным шаблоном является отображение загрузочного счетчика во время ожидания ответа службы. 

<Tab heading="Courses">
  {!this.state.isLoading && (<Courses cats={this.state.cats} />)}
  {this.state.isLoading && "Loading..."}
</Tab>
0 голосов
/ 15 марта 2019

Таким образом, метод рендеринга вызывается после вызова конструктора. Итак, у вас есть пустой массив. this.props.cats будет иметь пустой массив. И визуализирует компонент с пустым массивом. Затем setState вызывается с кучей данных массива, и метод renders вызывается снова, тогда this.props.cats будет иметь данные, заполненные массивом. Умм, убедитесь, что у вас начальное состояние, определенное как 

state = {
 cats = []
....
}
or 
this.state = {
 cats = []
....
}

Также сделайте console.log responseData.data, если он возвращает массив.

...