javascript - React Native 列表未填充值

Question

我目前正在用 React Native 构建一个列表，但不幸的是它没有填充任何值。列表元素有4个，与数组中的个数一致。但是界面中的项目只是空的。

    render() {
console.log(this.state.friends);
/*logs [
Array [
  Object {
"avatar_url": Alice url,
"id": 1,
"name": "alice",
"selected": false,
  },
  Object {
"avatar_url": Bob url,
"id": 2,
"name": "Bob",
"selected": false,
  },
  Object {
"avatar_url": Charlie url,
"id": 3,
"name": "Charlie",
"selected": false,
  },
  Object {
"avatar_url": Dave url,
"id": 4,
"name": "Dave",
"selected": false,
  },
]]*/
  return (
    <View style={styles.container}>
    <Content>
      <ScrollView>
        <List containerStyle={{marginBottom: 20}}>
          {
            this.state.friends.map((l, i) => {
              return(<ListItem
            roundAvatar
            avatar={{uri: l.avatar_url}}
            key={i}
            onPress={() => {this.clickedFriend(l)}}
            title={l.name}
            rightIcon={<Icon style={{alignSelf: 'center'}} size={25} name={l.selected ? "check-circle-o" : "times-circle-o"}/>}
          />)
        })
          }
          {/* <ListItem
            onPress={() => {this.inviteFriends()}}
            title="Invite Friends"

          /> */}
        </List>
      </ScrollView>
        <View style={styles.container2}>
              <View style={styles.buttonContainer}>
                <Icon.Button name="arrow-right" backgroundColor="#3b5998" onPress={()=>this.send()}>
                  <Text style={{color: "white"}}>Send</Text>
                </Icon.Button>
              </View>
        </View>
    </Content>
    </View>
  );

  }

Answer 1

我猜这是因为 map 函数没有返回任何东西。该映射确实映射了 4 个项目，因此对于 listView 项目，但不返回任何内容。在 map 函数中，尝试将你的内部放入一个 return(/ListItem here/)，就像这样。

{
            this.state.friends.map((l, i) => (
              return(<ListItem
                roundAvatar
                avatar={{uri: l.avatar_url}}
                key={i}
                onPress={() => {this.clickedFriend(l)}}
                title={l.name}
                rightIcon={<Icon style={{alignSelf: 'center'}} size={25} name={l.selected ? "check-circle-o" : "times-circle-o"}/>}
              />)
            ))
          }