Question

我是React Native的新手，我正在尝试使用map函数而非map函数创建模式。

我不知道这是否是最好的方法，但是我查看了很多资源，却找不到解决方法，因为我总是会在标题上看到此错误：

代码：

let times = this.state.plantelData.map(function (nome, key) {
  var detScout = '';
    detScout = nome.scout.map(function (item, i) {
      return (
        <Text>{i + ": " + item} </Text>
      )
    });
  return (
    <View style={styles.container} >
      <Modal visible={this.state.showMe} onRequestClose={() => console.warn("this is sparta")} >
        <View style={styles.modalView} >
          {detScout}
          <TouchableOpacity onPress={() => {
            this.setState({ showMe: false })
          }} >
            <Text style={styles.closeText}> Fechar</Text>
          </TouchableOpacity>
        </View>
      </Modal>
      <ListItem avatar key={key}>
        <Left>
          <Thumbnail source={{ uri: nome.foto }} />
        </Left>
        <Body>
          <Text>{nome.apelido + " - " + nome.nome_clube + " #" + nome.posicao_clube}</Text>
          <Text note>{"Posição: " + nome.posicao_atleta + " - Pontos: " + nome.pontos}</Text>
        </Body>
        <Right>
          <Text note>{nome.pontos}</Text>
        </Right>
        <Right>
          <TouchableOpacity onPress={() => {
            this.setState({ showMe: true })
          }} >
            <Icon type="FontAwesome" name="soccer-ball-o" />
          </TouchableOpacity>
        </Right>
      </ListItem>
    </View>
  )

Answer 1

map()是Array.prototype上的一种方法，但是nome.scout似乎不是数组，而是一个普通对象。
您想要的是该对象的键值对，以便您可以映射它们。可以通过Object.entries()完成。

尝试一下：

detScout = Object.entries(nome.scout).map(function([ key, item ]) {
  return (
    <Text>{key + ": " + item} </Text>
  )
});

Answer 2

在问题注释中，您说响应json是：

scout: { CA: [ 1 ], DD: [ 2 ], FS: [ 1 ], PE: [ 1 ], RB: [ 1 ], SG: [ 1 ] }

在这种情况下，“侦察兵”不是数组，而是一个对象，这就是为什么您不能使用map函数的原因。

如果您无法更改API响应，则可以使用以下内容：

for(var propt in nome.scout){
    console.log(nome.scout[propt]);}

TypeError未定义不是函数

2 个答案: