Как я могу передать полученный результат в качестве параметров компонента в router flux?

ProgramBox

Как я могу передать полученный результат в качестве параметров компонента в router flux?

Post author:admin
Запись опубликована:13 мая, 2023
Post category:Вопросы по программированию

#reactjs #react-native #jsx #react-native-router-flux

Вопрос:

Я пытаюсь передать параметры внутри компонента панели вкладок в react native с использованием router flux.Что я сделал, так это то, что полученный результат передается в виде параметров внутри компонента внутри панели вкладок.Ниже приведен мой код

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 .В чем ошибка в моем коде, пожалуйста, помогите.

1. Проблема в том, что выборка данных требует времени. Итак, по крайней мере, первый рендер <Courses> имеет неопределенный cats реквизит. Попробуйте управлять им следующим образом {this.props.cats amp;amp; this.props.cats.map(category...

2. вам не нужно этого делать, если ваше начальное состояние определено как пустой массив.

3. @SubhenduKundu верно, но на самом деле он пытается выполнить рендеринг из реквизитов, а не из состояния

4. Итак, метод визуализации вызывается после вызова конструктора. Итак, у вас есть пустой массив. this.props.cats будет иметь пустой массив. И отображает компонент с пустым массивом. Затем вызывается setState с набором данных массива, и метод renders вызывается снова, на этот раз this.props.cats будет иметь данные, заполненные массивом.

5. Чувак, мы говорим об одном и том же

Ответ №1:

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

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

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

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

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

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

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

1. слава. Это помогает @Sania

2. На самом деле вам не нужно оборачивать его с помощью async, потому что @anu вызывает setState только после вызова метода .then(). Но 2-я часть вашего ответа важна. 🙂

Ответ №2:

Вы пытаетесь выполнить цикл над своим cat массивом, еще не получив ответа от своего сервиса.

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

 <Tab heading="Courses">
  {!this.state.isLoading amp;amp; (<Courses cats={this.state.cats} />)}
  {this.state.isLoading amp;amp; "Loading..."}
</Tab>

1. Text strings must be rendered within text component .Я удалил это {this.state.isLoading amp;amp; "Loading..."} из вашего кода. Теперь ничего не приходит.

2. Ошибка довольно явная. Попробуйте с {this.state.isLoading amp;amp; (<span>Loading...</span>)} или замените его любым компонентом, который вы хотите отобразить при загрузке данных.

Ответ №3:

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

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

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