React Native FlatList 未显示

Question

每当我尝试显示孩子的列表时，它都会出现问题并且什么也做不了。我的 json 有问题还是我呈现列表的方式有问题？

我的文件：

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

function ClassList(props) {
  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}
        renderItem={({kid}) => (
          <View>
            <Text>{kid.name}</Text>
          </View>
        )}
      />
    </SafeAreaView>
  );
}

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

export default ClassList;

Answer 1

试试

const [kids, setKids] = useState([..blah blah blah..])

 <FlatList
    data={kids}
    renderItem={({item}) => (
      <View>
        <Text>{item.name}</Text>
      </View>
    )}
    keyExtractor={(item, idx) => item.key}
  />