Как перенаправить назад и обновить sh родительский вид - PullRequest
0 голосов
/ 20 февраля 2020

Привет всем, я новичок в реагировании на родной.

Реагировать на родной V 0.61 Реагировать на навигацию V 5.x

У меня есть панель поиска для API погоды, когда вы нажимаете на нее, вы получаете к списку температур.

Если вы введете неправильный город, я хочу вернуться с сообщением об ошибке. Моя проблема в том, что я не знаю, как это сделать, потому что мой родительский компонент не обновляется!

ПОИСК. JS

export default class Search extends React.Component {
constructor(props){
    super(props)
    this.state = {
        city: 'Liège',
        error: ''
    }
}

setCity(city){
    this.setState({city})
}

submit(){
    Keyboard.dismiss();
    this.props.navigation.navigate('Result', {state: this.state});
}

render(){
    if (this.state.error != '') {
        var error = this.state.error;
    } else {
        var error = 'hello world';
    }

    return (
        <View style={GlobalStyle.container}>
            <TextInput
                onChangeText={(text) => this.setCity(text)}
                onSubmitEditing={() => this.submit()}
                style={GlobalStyle.input}
                value={this.state.city}
            />
            <Button color={GlobalStyle.color} onPress={() => this.submit()} title="Lancé recherche"/>
            <Text>{error}</Text>
        </View>
    );
}}

СПИСОК. JS

export default class List extends React.Component {
constructor (props){
    super(props)
    this.state={
        city: this.props.route.params.state.city,
        result: null
    }
    this.fetchWeather();
}

fetchWeather(){
    axios.get('http://api.openweathermap.org/data/2.5/forecast?q='+this.state.city+'&appid=MYKEY&units=metric&lang=fr')
        .then((response) => {
            this.props.route.params.state.error = '';
            this.setState({result: response.data})
        })
        .catch(error => {
            // console.log(error.response.data.message);
            // console.log(this.props.navigation.setOptions());
            // this.props.navigation.setParams.onReturn({city: this.props.route.params.state, error: error.response.data.message});
            // this.props.state.error = 'errror';
            this.props.route.params.state.error = error.response.data.message; 
            // console.log(this.props.route.params.state.error);
            this.props.navigation.goBack();
            // this.props.navigation.navigate('Search', {error: error.response.data.message});

        });
}

render(){
    if(this.state.result === null){
        return (
            <ActivityIndicator color={GlobalStyle.color} size="large"/>
        );
    }else{
        return (
            <FlatList 
                data={this.state.result.list}
                renderItem={({item}) => <WeatherRow day={item}/>}
                keyExtractor={item => item.dt.toString()}
            />
        );
    }

}}

Спасибо за помощь и хорошего дня.

1 Ответ

0 голосов
/ 20 февраля 2020

В поиске. js добавить

onBackToHome =() => {

this.setState({
        city: 'Liège',
        error: ''
    })
}

submit(){
    Keyboard.dismiss();
    this.props.navigation.navigate('Result', {state: this.state, backToRefresh: this.onBackToHome});
}

Затем в список. js

//Add this line just above this.props.navigation.goBack()

this.props.navigation.state.params.backToRefresh();
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...