在react native中将API数据与下拉列表绑定

Question

我正在react native中构建一个示例应用程序，在该应用程序中，我需要使用for loop在下拉列表中显示API的数据。它在console.log((中显示数据，但有错误，也没有显示手机。

以下是代码文件

for(i=0; i<=this.state.droparray.length;i++)
{
var str_Code=this.state.droparray[i].Code
console.log('Code agya h+++++++ ', str_Code)

}
<DropDownPicker
items={[
{ label: 'ABC-12345678901',Code: 'PP-12345678901', },
{ label: 'ABC-12345678902',Code: 'PP-12345678902', },
{ label: 'ABC-12345678903',Code: 'PP-12345678903', },
{ label: 'ABC-12345678904',Code: 'PP-12345678904', },
{ label: 'ABC-12345678905',Code: 'PP-12345678905', },

]}
// defaultValue={this.state.item}
containerStyle={{ height: '20%'}}
placeholder="Select A Numbers"
style={{ backgroundColor: 'white' }}
itemStyle={{
justifyContent: 'flex-start',

}}
dropDownStyle={{ backgroundColor: 'transparent' }}
onChangeItem={item => this.setState({
Code: item.Code
})}

/>
</View>

有什么解决方案吗

Answer 1

试试下面的

state = {
droparray: [];
}
async componentDidMount() {
try {
const droparray = await fetch('https://example.com/'); 
// example like [{name: "John"},{name: "William"}];
var res = [];
droparray.map((item) {
res.push({...item, label: item.name}); 
// this process is for DropDownPicker as required label in data
});

this.setState({droparray: res});
} catch(err) {
console.log("Error fetching data-----------", err);
}
} 

<View> 
<DropDownPicker
items={this.state.droparray} // Do something like so it will reflect on view
.......          
/>
</View>