множественные вызовы внутри карты и отображение с помощью response-native-select-multiple - PullRequest
Новая
       17

множественные вызовы внутри карты и отображение с помощью response-native-select-multiple

0 голосов
/ 21 января 2020

У меня проблема, я пытаюсь отобразить список данных, используя 

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}

все, что я хочу, это название страны, затем список штатов и так далее. Обратите внимание, что в приведенном выше массиве с именем страны и идентификатором (mySelectedCountries) для каждого идентификатора мне нужно выполнить API-вызов этого состояния, чтобы я мог получить список состояний, находящихся внутри идентификатора этой страны. Я делаю это в componentDidMount

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

    }

Пожалуйста, дайте мне знать, если вам нужна дополнительная информация по этому, заранее спасибо:)

1 Ответ

0 голосов
/ 21 января 2020

В функции componentDidMount у вас есть массив асин c функций.

Вам нужно дождаться выполнения всего 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 в функции рендеринга

...