Question

有两个屏幕addcity和city。我正在通过道具从addcity发送数据并在城市正确接收，并且我正在尝试通过地图功能迭代道具从数据，但是它没有在我的设备上打印数据，事实上，我已经在控制台中检查了一下，并且它可以正确显示数据但不在View中。

我正在使用带有bottomtabnavigator的react-naviagtion库，并发送带有导航道具的道具。

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>
  )
}
}

我希望在“文本组件”中使用城市名称，但是即使我检查了控制台，但它却正确显示了我的数据，它仍显示为空

Answer 1

像这样修改城市部分：

render() {
    return (
      <View>
        {
          this.props.screenProps.cities.map((city, index) => {
            console.log(city);
            return (
              <Text style={{ color: 'black' }}>{city.city}</Text>
            )
          })
        }
       </View>
      )
    }
  }

Answer 2

您的map函数应该构造文本元素并返回它，而不是返回它。

属性未显示在地图功能中的react native文本组件中

2 个答案: