FlatList преобразует один элемент в массив

Question

FlatList преобразует один элемент в массив

1

В моем приложении я получаю свои данные с помощью axios. Как мы знаем, мы не можем отображать данные в FlatList как объект, это должен быть массив. Когда я выбираю свои данные с сервера, если это отдельный элемент, это объект, если их больше одного, он возвращает меня в виде массива. Как я могу показать свой единственный элемент в плоский список?

государство:

state = {
    events: [],
    isLoading: true,
    errorCode: null,
    errorMessage: null,
}

мой экземпляр плоского списка;

let events = <FlatList
        style={{ backgroundColor: 'white', height: '100%', width: '100%' }}
        data={this.state.events}
        keyExtractor={(x, i) => i.toString()}
        ListEmptyComponent={this.dataEmpty}
        renderItem={({ item }) => {
            return <EventsList
                startDate={item.startDate}
                headLine={item.eventName}
                description={item.location}
                endDate = {item.endDate}
            />;
        }}
    />;

tron 05 фев. 2019, в 10:33

Источник

0

вставьте свой ответ в вопрос
Hardik Virani 05 фев. 2019, в 09:17
0

если вы получаете объект из API, конвертируйте его в массив из одного элемента
Aaditya Thakkar 05 фев. 2019, в 09:19
1

Используйте Array.isArray(<response>) чтобы проверить, является ли он массивом или нет developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
adiga 05 фев. 2019, в 09:20
0

как вы назначаете api res для состояния события?
Jaydeep Galani 05 фев. 2019, в 09:34

Показать ещё 2 комментария

Теги:

javascript

react-native

2 ответа

1

Просто проверьте, если события не являются массивом, верните его в массив:

.... 
      data={Array.isArray(this.state.events)
         ? this.state.events
         : [this.state.events]}
....

kiarashws 05 фев. 2019, в 07:27

0

это бросает мне объекты, не действительные как реагирующее дочернее (найдено: объект с ключами {}). Если вы хотите отобразить коллекцию дочерних элементов, используйте вместо этого массив.
tron 05 фев. 2019, в 09:23
0

Да, с этой версией ваш код тоже работает. Спасибо за ответ.
tron 06 фев. 2019, в 08:21

Ещё вопросы

если вы получаете объект из API, конвертируйте его в массив из одного элемента
Используйте Array.isArray(<response>) чтобы проверить, является ли он массивом или нет developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…
как вы назначаете api res для состояния события?
это бросает мне объекты, не действительные как реагирующее дочернее (найдено: объект с ключами {}). Если вы хотите отобразить коллекцию дочерних элементов, используйте вместо этого массив.
Да, с этой версией ваш код тоже работает. Спасибо за ответ.

Andrew · Accepted Answer · 2019-02-05T08-16-00.000Z

Я хотел бы убедиться, что данные являются массивом, прежде чем вы сохраните их в состояние, если не изменить его в массив. Array.isArray() - это правильный способ проверить, является ли что-либо массивом. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray

Можно создать простую функцию

проверить массив,
если это массив, вернуть его,
если это не массив, преобразовать его в массив и вернуть

let result1 = {id: 1};          // object result
let result2 = [{id:1}, {id: 2}] // array result

function checkData (result) {
  if (Array.isArray(result)) {
    return result
  } else {
    return [result]
  }
}

console.log(checkData(result1))
console.log(checkData(result2))

Я думаю, что делать это после того, как вы уже ввели его в состояние, не лучший способ. Таким образом, вы, вероятно, хотите сделать что - то подобное в вашем axios вызова, прежде чем использовать setState

Я пробую ваше решение. Я сообщу тебе позже. Спасибо за ваш ответ.
Да, это помогло. В качестве вашего ответа я обработал его в своем аксиальном состоянии. Спасибо за ответ.