未在react native中呈现的平面列表

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

和renderitem是

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

}

但这部分甚至没有呈现

不知道哪里出了问题!

console.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>
)
}