如何重定向回并刷新父视图

Question

大家好，我是新来的本地人。

React native V 0.61反应导航V 5.x

一旦单击温度列表，我就会找到天气API的搜索栏。

如果您输入无效的城市，我想通过错误消息重定向回去。我的问题是我不知道该怎么做，因为我的父组件没有得到更新！

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

LIST.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()}
            />
        );
    }

}}

感谢您的帮助，祝您有美好的一天。

Answer 1

在Search.js中添加

onBackToHome =() => {

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

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

然后在List.js中

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

this.props.navigation.state.params.backToRefresh();