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

<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，它在开头返回数组的帖子。

Answer 1

你可以在一个数组中展平你的对象数组（在接收到一些循环后将所有对象放在一个数组中）然后在平面列表中使用它（因为你知道每个对象有多少个条目）。了解它进一步在这里看到正确的答案。 react native flatlist with several arrays of data

使用对象数组显示FlatList（React Native）

1 个答案: