Как обновить параметры после навигации?

Question

У меня есть реагирующий стек навигации, который имеет два экрана: Landing и PreLoginQuestion

Landing.js

import React, { Component } from 'react';
import { View, Button } from 'react-native';
import Api from '../services/Api';
import { NavigationActions } from 'react-navigation';

export default class Landing extends Component {

preLoginDataURL = 'pre-login/data/get';

constructor(props) {
    super(props);
    this.state = { data: null };
}

async componentDidMount() {
    try {
        const response = await Api.getData(this.preLoginDataURL);
        this.setState({ data: response.data });
    } catch (err) {
        console.error(err);
    }
}

onNextStepsPress = () => {
    console.log('In next steps');
    this.props.navigation.navigate('Question', {
        data: this.state.data
    });
};

render() {
    return (
        <View>
            <Button title="Next Steps" onPress={this.onNextStepsPress} />
        </View>
    );
}
}

PreLoginQuestion.js

export default class PreLoginQuestion extends Component {

constructor(props) {
    super(props);
    this.navigation = this.props.navigation;
    this.data = this.navigation.state.params.data;
    console.log(this.data);
}

render() {
    return (
        <View>
            <Text>Pre login question Component</Text>
        </View>
    );
}
}

Я отправляю данные в виде параметра из компонента Landing в компонент PreLoginQuestion.В начале он имеет значение null, но когда он извлекается из API, я хочу получить это обновленное значение в компоненте PreLoginQuestion.Поэтому мой вопрос заключается в том, как мне внести изменения в уже отправленные параметры, чтобы я мог получить измененное значение на экране навигации (PreLoginQuestion)?

Я пытался NavigationActions.setParams() с отправкой, но не смог 'не заставляй его работать.

Я очень новичок, чтобы реагировать и реагировать на нативные, поэтому, пожалуйста, прости меня, если я не использую правильный подход: D

Answer 1

Я думаю, вам следует вызвать api в компоненте PreLoginQuestion (в componentDidMount)

Или использовать функцию управления состоянием (redux или mobx).Когда вы получите данные для отправки ответа, вы можете легко получить данные от редуктора.

Answer 2

Можно было бы отобразить компонент ActivityIndicator на компоненте Landing во время выполнения сетевого запроса.Примерно так:

import React, { Component } from 'react';
import { View, Button, ActivityIndicator } from 'react-native';
import Api from '../services/Api';
import { NavigationActions } from 'react-navigation';

export default class Landing extends Component {

preLoginDataURL = 'pre-login/data/get';

constructor(props) {
    super(props);
    this.state = { data: null };
}

async componentDidMount() {
    try {
        const response = await Api.getData(this.preLoginDataURL);
        this.setState({ data: response.data });
    } catch (err) {
        console.error(err);
    }
}

onNextStepsPress = () => {
    console.log('In next steps');
    this.props.navigation.navigate('Question', {
        data: this.state.data
    });
};

render() {
    return (
        <View>
            {this.state.data ?
            <Button title="Next Steps" onPress={this.onNextStepsPress} /> :
            <ActivityIndicator/>}
        </View>
    );
}
}

И затем, как только вы перейдете к этому PreLoginQuestion, вам гарантированно будут доступны данные.Надеюсь, это поможет:)