Привет всем, я новичок в реагировании на родной.
Реагировать на родной 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()}
/>
);
}
}}
Спасибо за помощь и хорошего дня.