0

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

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);
        })

    }

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

4

1 回答 1

0

在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在渲染函数中映射

于 2020-01-21T12:15:34.787 回答