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

Question

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

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

我用的map是ES6中JS引入的一种数据结构

我正在为下拉菜单使用选择器。

我正在用 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 是否被正确访问，方法是点击一个按钮进行记录。

问题是我无法看到下拉菜单被填充，我所看到的只是点击向下箭头，它什么都不做。

之前我手动添加了两个选择器项目，我可以在点击时看到它们。

更新：

The issue is that the render function is called before the API could fetch the details and update state variable.

Thereby the dropdown is empty but the console.log that is called on pressing a button shows data. (lemme know if you want to see the code)

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

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

Answer 1

通常，反应组件不会在数组更改时重新渲染，以避免多次重新渲染。解决方法之一是 'force' 通过更改组件键伪造新组件来重新渲染组件：

<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 数组获得新的长度时，您的选择器都会获得一个新的 Key。如果旧长度 != 新长度，它将充当新组件并重新渲染。
请注意，数组的长度可能是一个简单的解决方案，但可能不是最好的（相同长度=不重新渲染）

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

Answer 2

我得到的解决方法是：

Inside Constructor:

设置布尔值 "isLoading" 为真。

Inside componentDidMount function:

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

OPTIONAL - Inside Render:

有一个 if else 块，其中 returns 两个不同的块取决于 "isLoading"

例如，您可以拥有：

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

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

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

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

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

A re-render can only be triggered if a component’s state has changed.

The state can change from a props change, or from a direct setState change.
The component gets the updated state and React decides if it should re-render the component. Unfortunately, by default React is incredibly simplistic and basically re-renders everything all the time.

全文here。

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

更新：

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

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

How to call render in React Native after API successfully fetches data

javascript

api

asynchronous

picker

react-native