如何将获取的结果作为路由器通量中组件的参数传递？

Question

我正在尝试使用路由器 Flux 在 React Native 中传递选项卡栏组件内的参数。我所做的是获取的结果作为选项卡栏内组件内的参数传递。以下是我的代码

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。我的代码有什么错误请帮忙。

Answer 1

所以渲染方法是在构造函数调用之后调用的。所以你有一个空数组。 this.props.cats 将有一个空数组。并使用空数组呈现组件。然后用数组的一堆数据调用 setState，再次调用 renders 方法，此时 this.props.cats 将有一个充满数组的数据。 嗯，请确保您将初始状态定义为

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

如果它返回一个数组，还要执行 console.log responseData.data。

Answer 2

所以第一次渲染组件时，this.state.cats 是未定义的。

你可以用你的代码做的是：

1. 将您的 fetch 调用包装在异步调用中，即一个承诺。例如，

//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
  });
}

或者

1. 到您的组件<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>

附：专注于您的状态管理，一切顺利。

Answer 3

您正在尝试循环遍历您的 cat 数组，而尚未收到您的服务的响应。

一种常见的模式是在等待服务响应时显示加载微调器。

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