平面列表未在本机反应中呈现

Question

在我的 React 本机页面中，
我使用参数从一个页面导航到另一个页面

因此这些参数具有 id，它将用于从端点获取数据并将其显示在平面列表中

function Assessments ({route,navigation}) {
  useEffect(()=>{
    fetchData(file)
  },[]);
  const { file } = route.params;
  const [data,setData] = useState([]);

文件由路由参数（Id）组成

和 fetchdata 函数触发该函数与 id 并获取数据

  const fetchData = async (file) => {
    axios.get(`endpoint`)

      .then(function (response) {
        console.log(response.data)
        setData(response.data)
  


      })
      .catch(function (error) {
          console.log(error);
      })

  }

我正在返回这个

 return (

<View>
  <Text>okay</Text>


      <FlatList 
            flexGrow= {0}

            minHeight= '20%'
            maxHeight='80%'
      data={data}
      renderItem={showdata}>
      </FlatList>


      </View>
 )

渲染项目是

  const showdata = ({item}) => {
      <View>
        sdfdsfsdf
      </View>
    
  }

但这部分甚至没有被渲染

不知道问题出在哪里！

控制台.log()

{
    "id": 19,
    "name": "test1",


}

这就是来自端点的数据的样子

Answer 1

你showdata没有返回任何东西。请return像这样添加。

这是完整的代码。

function Assessments ({route, navigation}) {
  const { file } = route.params;
  const [data, setData] = useState([]);

  useEffect(()=>{
    fetchData(file)
  },[]);

  const fetchData = async (file) => {
    axios.get(`endpoint`)
      .then(function (response) {
        console.log(response.data)
        setData(response.data)
      })
      .catch(function (error) {
        console.log(error);
      })
  }

  const showdata = ({ item }) => {
    //Add return here
    return (
      <View>
        <Text>
          sdfdsfsdf
        </Text>
      </View>
    )
  }

  return (
    <View>
      <Text>okay</Text>
      <FlatList 
        //Put all the style within style prop
        style={{flexGrow: 0, minHeight: '20%', maxHeight: '80%'}}
        data={data}
        renderItem={showdata}
      >
      </FlatList>
    </View>
  )

}