React Native FlatList组件无法正常显示列表数据问题排查

你的代码存在两处直接导致FlatList无法渲染的错误：

• useState 调用方式错误：React的useState Hook返回值是[状态值, 状态更新函数]结构的数组，你没有做解构，直接把整个返回数组赋值给了kids变量，最终传给FlatList的data属性根本不是你定义的学生列表，组件无法识别有效渲染数据。
• renderItem 回调参数解构错误：FlatList向renderItem传入的参数中，当前遍历到的列表项固定存放在item字段下，你写的{kid}属于解构不存在的字段，拿到的值是undefined，访问kid.name时没有有效内容，自然渲染不出任何元素。

import React, {useState} from 'react';
import { FlatList, SafeAreaView, StyleSheet, Text, View } from 'react-native';

function ClassList(props) {
  // 解构useState返回值，取到实际的列表状态
  const [kids] = useState([
    { name: 'John', grade: '100', key: '1' },
    { name: 'Jimmy', grade: '90', key: '2' },
    { name: 'Jackson', grade: '80', key: '3' },
  ]);


  return (
    <SafeAreaView style={styles.container}>
      <FlatList
        data={kids}
        // 解构item字段获取单个列表项
        renderItem={({item}) => (
          <View>
            <Text>{item.name}</Text>
          </View>
        )}
      />
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: '#a0a0a0',
  },
});

export default ClassList;

如果这份学生列表是固定不变的静态数据，不需要用useState包裹，直接定义普通常量即可，能避免不必要的状态开销：

// 直接定义静态数据即可，不需要放在useState里
const kids = [
  { name: 'John', grade: '100', key: '1' },
  { name: 'Jimmy', grade: '90', key: '2' },
  { name: 'Jackson', grade: '80', key: '3' },
];

如果数据没有自带key字段，可以给FlatList添加keyExtractor属性指定唯一键，避免渲染警告。

内容的提问来源于stack exchange，提问作者Aztro