Свойства не отображаются в компоненте собственного текста реагирования в функции карты - PullRequest
0 голосов
/ 02 июня 2019

Есть два экрана 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>
  )
}
}

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

Ответы [ 2 ]

1 голос
/ 02 июня 2019

изменить компонент города следующим образом:

render() {
    return (
      <View>
        {
          this.props.screenProps.cities.map((city, index) => {
            console.log(city);
            return (
              <Text style={{ color: 'black' }}>{city.city}</Text>
            )
          })
        }
       </View>
      )
    }
  }
0 голосов
/ 02 июня 2019

Ваша функция карты должна создать текстовый элемент и вернуть его, а вы его не возвращаете.

...