Javascript 如何将项目分配给以数组形式获取数据列表作为响应的选择器？

我在将数据添加到picker.item时遇到了一个问题，对于picker.item，数据的形式为单个数组

我已经尝试使用地图和推动阵列，但似乎没有任何效果

我的数组如下

[  "ABC",  "XYZ",  "123",  "aaa"]

   class XYZ extends Component {
    constructor(props) {
        super(props);
        this.state = {    statelist: ''        };
       list() {        
        fetch('myURL', {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
                        },
        })
            .then((response) => {
                    return response.json();
                })
            .then((data) => {
                data.map((item,key)=>{
                    console.log(item,key,'item and key')
                    return(
                    <Item label={item} value={item} />)
                })
}
    async onStateChange(value) {
        await this.setState({
            statelist: value
        });}

    render() {
        return (
                <View >
                        <Picker
                            selectedValue={this.state.abc}
                            onValueChange={this.onStateChange.bind(this)}>
                            this.list()}
                        </Picker>
                </View>

        );
    };
}

export default withNavigation(XYZ);

[“ABC”、“XYZ”、“123”、“aaa”]
类XYZ扩展组件{
建造师（道具）{
超级（道具）；
this.state={statelist:''}；
列表（）{
获取（'myURL'{
方法：“GET”，
标题：{
“内容类型”：“应用程序/json”，
},
})
。然后（（响应）=>{
返回response.json（）；
})
。然后（（数据）=>{
data.map（（项目，键）=>{
日志（项、键、“项和键”）
返回(
)
})
}
异步onStateChange（值）{
等待这一天({
状态列表：值
});}
render（）{
返回(
this.list（）}
);
};
}
使用导航导出默认值（XYZ）；

---

我想要一个由5个选项组成的下拉列表，如上图所示，这些选项应该是数组的所有5个元素。

为了触发组件上的更新以添加项目，在您的情况下，您应该使用React state。事实上，使用fetch您正在执行一个异步操作，不会立即返回结果

在fetch中的

then（）

回调中，如果在函数组件中使用钩子（查看此链接：），则将

data

保存到状态变量中；如果使用类组件，则使用

this.setState（{data:data}）

然后在return语句中，使用

data

变量（用于函数组件）：

---

在任何情况下，如果您共享您的文件，我可以更好地帮助您，否则我无法编写完整的示例。

您没有从调用返回数据，而且您也在处理异步调用。您应该在每次渲染时获取数据，或者在

componentDidMount（）

中获取一次数据，然后设置状态

const DATA=[1,2,3,4,5,6]
类选择扩展了React.Component{
构造函数（）{
超级（）
this.state={}
}
getList（）{
返回Promise.resolve（DATA）.then（DATA=>DATA.map（item=>））
}
componentDidMount（）{
this.getList（）.then（data=>this.setState（{list:data}））
}
render（）{
返回(
{this.state.list | | null}
)
}
}
ReactDOM.render(
,
document.getElementById（“根”）
)；

---

在这里，您可以找到我所说的使用组件状态的示例

---

您遇到了什么问题？

data.map（（项）=>）

应该可以工作。即使使用了上述代码，我也会得到一个空的下拉列表。“数据”是我从服务得到的响应，如果这对解决方案有帮助的话。@RB612你能显示你的整个文件吗？你可能正在处理一个异步任务。我已经编辑了代码。希望它有帮助@KobeIt可能不是你的pr的原因问题，但您应该将

键

属性添加到项目中。

这是一个错误，因为This.getList.then不是函数。@KobeDid您是否先绑定函数？绑定函数后，相同的错误仍然存在。@KobeUse

This.getList（）。然后

谢谢，marcodt89和@Kobe我还没有得到解决方案。你能帮我举个例子吗。我想我应该使用“for”循环将项目添加到选取器中。

return <Picker> 
    { data.map((item)=> <Item label={item} value={item} />) }
<Picker>

<Picker> 
    { this.state.data.map((item)=> <Item label={item} value={item} />) }
<Picker>