我是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?
我得到的解决方法是:
内部构造函数:
内部componentDidMount函数:
可选-内部渲染:
例如,您可以:
if(this.state.isLoading)
{
return(
<View>
<ActivityIndicator/>
</View>
)
}
该图显示了在提取数据时的加载循环。否则,您可以不使用if else块而继续进行操作,唯一的问题是下拉列表会突然被填充,并且看起来可能不太好。
-从而重新渲染屏幕,并在提取数据后将其填充到下拉菜单中。
我知道,可能会有一个更优化的解决方案,但这是我到目前为止所获得的。
但是可能有人会问,它是如何工作的?
仅当组件的状态已更改时才可以触发重新渲染。
状态可以从props更改或直接setState更改更改。
组件获取更新后的状态,React决定是否应重新渲染组件。不幸的是,默认情况下,React非常简单,基本上一直都在重新渲染。
全文在这里。
如果您确实找到了更好的重新渲染解决方案,请告诉我。因为当我们根据先前选择的选项填充下拉列表时,使用此方法可能会使事情变得复杂。
更新:
我找到了一个漂亮的博客,该博客解释了组件的生命周期,以及一个应该调用API的地方和不应该调用API的地方。请检查一下,并忽略我上面的菜鸟建议。