React Native FlatList 未显示

Posted 2023-02-16

【中文标题】React Native FlatList 未显示

【英文标题】：React Native FlatList not showing

【发布时间】：2022-01-22 15:35:06

【问题描述】：

每当我尝试显示孩子的列表时，它都会出现问题并且什么也做不了。我的 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;

【参考方案1】：

试试

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

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

【讨论】：

我试过了，这次它实际上显示了背景，但它只是说“绑定 dispatchAction”，就是这样。为了摆脱这个问题，我还有什么需要补充的吗？

请检查我的编辑，您的const kids = useState 行也必须更改

成功了！非常感谢。

请标记为答案。谢谢。

我会的，它只是一直说我必须等待才能回答