使用对象数组显示 FlatList (React Native)

Question

我有一个道具在哪里

console.log(this.props.userList);

返回

Array [
  Object {
    "userData": Object {
      "userName": "David",
      "userAge": 20,
    },
    "id": "ax3",
  },
  Object {
    "userData": Object {
      "userName": "Phillip",
      "userAge": 27,
    },
    "id": "xq4",
  },
  Object {
    "userData": Object {
      "userName": "Kelly",
      "userAge": 28,
    },
    "id": "pj7"
  }
]

我试图通过编写从该数据生成一个平面列表：

<FlatList
  data={this.props.userList}
  keyExtractor={item => item.id}
  renderItem={({ item }) =>
    <Text>{item.userData.userName}</Text>
  }
/>

在我的 iphone 上通过 Expo 进行测试时，该应用程序就死机了。不会抛出任何错误或任何东西。这个方法不正确吗？

*在下面添加完整的渲染

  render() {
    return (
        <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
            <View style={styles.mainViewStyle}>
                <View style={styles.searchBarViewStyle}>
                    <TextInput
                        style={styles.textInputStyle}
                        placeholder="User"
                        autoCorrect={false}
                        autoCapitalize="none"
                        onChangeText={this.onUserChanged.bind(this)}
                        value={this.props.userInput}
                    />
                </View>
                <View>
                    <Button
                        title="press this"
                        onPress={() =>
                            this.props.navigation.navigate("yearSearch")
                        }
                    />
                </View>
                <View>
                    <Button
                        title="testUserSearch"
                        onPress={() => this.showData()}
                    />
                </View>
                <View>
                    <FlatList
                        data={this.props.userList}
                        keyExtractor={item => item.id}
                        renderItem={({ item }) => (
                            <Text>{item.userData.userName}</Text>
                        )}
                    />
                </View>
            </View>
        </TouchableWithoutFeedback>
    );
}

如果我取出它的 Flatlist 部分，它运行良好。showData() 函数目前只是控制台记录 this.props.userList，它在开头返回数组 post。

Answer 1

您可以将对象数组展平为一个数组（使用某种循环接收后将所有对象放入一个数组中），然后在平面列表中使用它（因为您知道每个对象有多少个条目）。要进一步理解它，请参阅此处的正确答案。 使用多个数据数组对本机平面列表做出反应