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

Question

我是 React Native 的新手，在其中填充下拉选项时遇到问题。

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

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

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

我正在使用 REST API 获取的数据填充名为 branchData 的地图。

这是我用于填充下拉列表的代码：

<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 获取详细信息和更新状态变量之前调用了渲染函数。

因此下拉菜单是空的，但按下按钮时调用的 console.log 会显示数据。 （如果你想看代码，请告诉我）

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

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

Answer 1

我得到的解决方法是：

内部构造函数：

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

componentDidMount 函数内部：

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

可选 - 内部渲染：

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

例如，您可以拥有：

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

在获取数据时显示加载循环。 否则，您可以在没有 if else 块的情况下继续操作，唯一的问题是下拉菜单会被突然填充并且可能看起来不太好。

- 从而重新渲染屏幕并在获取数据后将数据填充到下拉列表中。

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

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

只有在组件的状态发生变化时才能触发重新渲染。

状态可以通过 props 更改或直接 setState 更改 改变。
组件获取更新的状态，React 决定是否更新 应该重新渲染组件。不幸的是，默认情况下 React 是 非常简单，基本上重新渲染了所有内容 时间。

全文here。

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

更新：

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

Answer 2

通常，react 组件不会在数组更改时重新渲染，以避免多次重新渲染。一种解决方法是通过更改组件键来“强制”组件重新渲染，方法是伪造一个新组件：

<Picker
  key={`myPicker_${this.state.branchData.length}`} //HERE
  selectedValue={this.state.branch}
  style={styles.fieldPicker}
  mode="dropdown"
  onValueChange={(itemValue, itemIndex) =>
    this.setState({branch: itemValue})
  }>
    {this.state.branchData.forEach((name, id) => {
        return <Picker.Item key={id} value={id} label={name} />;
    })}
</Picker>

基本上，每次您为this.state.branchData 数组获得一个新长度时，您的选择器都会获得一个新密钥。如果旧长度！= 新长度，它将充当新组件并重新渲染。
请注意，数组的长度可能是一个简单的解决方案，但可能不是最好的（相同的长度 = 不重新渲染）

我不确定它是否能解决你的问题，但值得一试