Есть два экрана addcity и города.Я отправляю данные из addcity через реквизиты и получаю в городах должным образом, и я пытаюсь перебрать данные из реквизитов через функцию карты, но это не распечатывает данные на моем устройстве, на самом деле, я проверил в консоли, и он показывает данные правильноно не в View.
Я использую библиотеку реагирования-навигации с bottomtabnavigator и отправляю реквизиты с навигационными реквизитами.
app.js
state = {
cities: []
}
addCity = city => {
const cities = this.state.cities;
cities.push(city);
this.setState({ cities })
}
render() {
return (
<Tabs screenProps={{ cities: this.state.cities, addCity: this.addCity }} />
)
}
cities component
render() {
return (
<View>
{
this.props.screenProps.cities.map((city, index) => {
console.log(city);
<Text style={{ color: 'black' }}>{city.city}</Text>
})
}
</View>
)
}
}
addcity component
onSubmit = () => {
if (this.state.city === '' || this.state.country === '') return
const city = {
id: uuidV4(),
city: this.state.city,
country: this.state.country,
locations: []
}
this.props.screenProps.addCity(city);
this.setState({
city: '',
country: ''
}, () => { this.props.navigation.navigate('Cities') });
}
render() {
console.log('props', this.props);
return (
<View style={styles.container}>
<Text style={styles.heading}>Cities App</Text>
<TextInput style={styles.input} placeholder='City' value={this.state.city} onChangeText={val => this.onChangeTextInput('city', val)} />
<TextInput style={styles.input} placeholder='Country' value={this.state.country} onChangeText={val => this.onChangeTextInput('country', val)} />
<TouchableOpacity onPress={this.onSubmit}>
<View style={styles.button}>
<Text style={styles.buttonText}> Add City </Text>
</View>
</TouchableOpacity>
</View>
)
}
}
Я ожидаю, что название города будет вТекстовый компонент, но он отображается пустым, хотя я проверил консоль и правильно утешает мои данные