Отображение FlatList с использованием массива объектов (React Native)

У меня есть опора, где

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

При тестировании через Expo на моем iphone приложение просто зависает. Не выдает никаких ошибок и прочего. Является ли этот метод неверным?

* Добавление в полный рендер ниже

  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, который возвращает запись массива в начале.


person FortuneFaded    schedule 27.01.2018    source источник
comment
Вроде нормально. Можете ли вы показать полное определение функции render?   -  person Diogo Sgrillo    schedule 28.01.2018
comment
@DiogoSgrillo только что опубликовал   -  person FortuneFaded    schedule 29.01.2018


Ответы (1)


вы можете объединить свой массив объектов в один массив (поместить все объекты в один массив после получения с использованием некоторого цикла), а затем использовать его в плоском списке (поскольку вы знаете, сколько записей имеет каждый объект). чтобы понять это, см. правильный ответ здесь. реагировать на собственный плоский список с несколькими массивами данных

person Prisma    schedule 04.05.2018