javascript API成功获取数据后如何在React Native中调用渲染

javascript - API成功获取数据后如何在React Native中调用渲染

发布于 2020-03-29 21:55:44

我是React Native的新手，在填充下拉选项时遇到了麻烦。

在您说这是一个重复的问题之前- 这是3年前提出的问题的链接，在那里他们讨论了如何使用数组和列表填充下拉列表。

我正在使用map，这是ES6的JS中引入的数据结构。

我正在使用Picker作为下拉菜单。

我正在用REST API提取的数据填充名为branchData的 map。

这是我用于填充下拉菜单的代码：

<Picker
            selectedValue={this.state.branch}
            style={styles.fieldPicker}
            mode="dropdown"

            onValueChange={(itemValue, itemIndex) =>
              this.setState({branch: itemValue})
            }>

            {/* Data Binding */}

                {this.state.branchData.forEach((name, id) => 
                      {
                      return <Picker.Item key={id} value={id} label={name} />;
                      })
                }



          </Picker>

我通过单击按钮登录来检查名称和ID是否被正确访问。

问题是我看不到下拉列表被填充，我所看到的只是向下的敲击，什么也没做。

早些时候，我手动添加了两个选择器项，并且能够在点击时看到它们。

更新：

问题在于，在API可以获取详细信息并更新状态变量之前调用了render函数。

因此，下拉列表为空，但是按下按钮时调用的console.log显示数据。（让我知道是否要查看代码）

我在构造函数中添加了API调用，假设它将在渲染之前执行，但API调用是异步调用，不会在渲染之前发生。

简而言之 -API成功获取数据后如何调用render？

Ritveak 2020-02-03 15:04

我得到的解决方法是：

内部构造函数：

将布尔值“ isLoading”设置为true。

内部componentDidMount函数：

编写数据获取代码，并在加载数据后将“ isLoading”的布尔值更改为false。

可选-内部渲染：

有一个if else块，根据“ isLoading”的值返回两个不同的块

例如，您可以：

if(this.state.isLoading)
{
  return(
  <View>
  <ActivityIndicator/>
  </View>
  )
}

该图显示了在提取数据时的加载循环。否则，您可以不使用if else块而继续进行操作，唯一的问题是下拉列表会突然被填充，并且看起来可能不太好。

-从而重新渲染屏幕，并在提取数据后将其填充到下拉菜单中。

我知道，可能会有一个更优化的解决方案，但这是我到目前为止所获得的。

但是可能有人会问，它是如何工作的？

仅当组件的状态已更改时才可以触发重新渲染。

状态可以从props更改或直接setState更改更改。
组件获取更新后的状态，React决定是否应重新渲染组件。不幸的是，默认情况下，React非常简单，基本上一直都在重新渲染。

全文在这里。

如果您确实找到了更好的重新渲染解决方案，请告诉我。因为当我们根据先前选择的选项填充下拉列表时，使用此方法可能会使事情变得复杂。

更新：

我找到了一个漂亮的博客，该博客解释了组件的生命周期，以及一个应该调用API的地方和不应该调用API的地方。请检查一下，并忽略我上面的菜鸟建议。

javascript - API成功获取数据后如何在React Native中调用渲染

相关问题