地图内的多个调用并使用 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}
                        />)
        })

我在返回中显示为{myListedData}

我想要的只是国家名称，然后是其州列表，依此类推。请注意，上面的数组具有国家名称和 id (mySelectedCountries)，在每个 id 上，我需要对 state 进行 API 调用，以便我可以获得这个国家 id 内的州列表。我在componentDidMount这样做

componentDidMount = () => {
        this.mySelectedCountries.map((x) => {
            return this.getStates(x.value);
        })

    }

如果您需要这方面的更多信息，请告诉我，提前谢谢您:)

Answer 1

在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