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

Question

我在将数据添加到 picker.item 时遇到问题，其中数据采用单个数组的形式。

我尝试过使用 map 并推送数组，但似乎没有任何效果。

我的数组如下

[  "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);

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

Answer 1

您没有从调用中返回数据，并且您还在处理异步调用。您应该在每次渲染时获取数据，或者在 componentDidMount() 中获取一次数据，然后设置状态。

const DATA = [1, 2, 3, 4, 5, 6]

class Select extends React.Component {
    constructor() {
        super()
        this.state = {}
    }

    getList() {
        return Promise.resolve(DATA).then(data => data.map(item => <option label={item} value={item} />))
    }

    componentDidMount() {
        this.getList().then(data => this.setState({ list: data }))
    }

    render() {
        return (
            <select onChange={this.onStateChange}>
                {this.state.list || null}
            </select>
        )
    }
}

ReactDOM.render(
    <Select />,
    document.getElementById("root")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>