在地图中多次调用并使用react-native-select-multiple显示

Question

我有问题，我正在尝试使用]显示数据列表>

SelectMultiple from "react-native-select-multiple"
现在，我来自上一个屏幕，我使用this.props.navigation.navigate并获得了具有值的数组

[{val:24, name:'India'},{val:23, name:'Iceland'}]
并以]的形式存储在数组的顶部>
mySelectedCountries = this.props.navigation.state.params.countries;
然后使用选择多个，并尝试使用API​​显示每个国家/地区的州列表。
这是我的请求

getStates = (val) => {
        ajax.get(route('states.index'), {
            params: {
                country_id: val,
                all: true
            }
        })
        .then(res => {
            console.log('States list', res.data.data);
            this.myStatesData.push(res.data.data);
        })
        .catch(err => {
            this.setState({ loading: false }, () => {
            Alert.alert(
                'Something went wrong!',
                'Please go to previous step and retry',
                [],
                { cancelable: true },
            );
            });
            console.log(err);
        });
    }
然后我试图映射在程序顶部声明为空数组的statesData
myListedData = this.myStatesData.map((oneState) => {
            return (<SelectMultiple
                            items={oneState.map((x) => ({ label: x.name, value:x.id }))}
                            selectedItems={this.state.selectedStates}
                            onSelectionsChange={this.onSelectionsChange}
                            maxSelect={3}
                        />)
        })
Im在返回中显示为{myListedData}
我想要的只是国家名称，其后是州列表，依此类推。请注意，上面的数组在每个id上都有国家名称和ID（mySelectedCountries）的名称，我需要对该州进行API调用，以便获取该国家ID内的州列表。我在componentDidMount]中这样做
componentDidMount = () => {
        this.mySelectedCountries.map((x) => {
            return this.getStates(x.value);
        })

    }
请让我知道是否需要其他信息，谢谢：）
[我有一个问题，我试图从“ react-native-select-multiple”中使用SelectMultiple显示数据列表。现在，我来自上一个屏幕，我正在使用this.props.navigation.navigate并获取一个数组...

在componentDidMount函数中，您具有异步函数数组。

您需要等待所有ajax请求完成，然后执行setState以重新呈现组件。

这是我的解决方法：

getStates = (val) => {
        ajax.get(route('states.index'), {
            params: {
                country_id: val,
                all: true
            }
        })
        .then(res => {
            return res.data.data;
        })
        .catch(err => {
            this.setState({ loading: false }, () => {
            Alert.alert(
                'Something went wrong!',
                'Please go to previous step and retry',
                [],
                { cancelable: true },
            );
            });
            console.log(err);
        });
    }
componentDidMount = () => {
        Promise.all(
            this.mySelectedCountries.map((x) => {
                return this.getStates(x.value);
            })
        ).then(arrayOfAllGetStates => {
             this.setState({myStatesData:arrayOfAllGetStates})
        })

    }
然后您需要在渲染功能中映射到this.state.myStatesData上>

Answer 1

在componentDidMount函数中，您具有异步函数数组。