javascript - FlatList 将单个项目转换为数组

Question

在我的应用程序中，我使用 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}
            />;
        }}
    />;

Answer 1

在将数据存储到状态之前，我会确保数据是一个数组，如果不将其更改为数组的话。 Array.isArray() 是检查某物是否为数组的正确方法。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray

可以创建一个简单的函数

1. 检查数组，
2. 如果是数组则返回它，
3. 如果不是数组，则将其转换为数组并返回

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))

我认为在已经进入状态之后再这样做并不是最好的方法。因此，在使用 setState

之前，您可能需要在 axios 调用中执行类似的操作