我正在使用useEffect来获取数组数据，然后显示项目。当我获取数据时，我可以看到数据已成功获取。
但是，当我尝试在view中显示数据时，它给我一个错误Cannot read property 'name' of undefined
我认为view在获取之前正在渲染。但是我使用async await确保首先调用useEffect。
是否知道如何在view中显示数据？
任何意见或建议将非常有帮助。提前致谢 ：）
const FetchUsers = () => {
const [data, setData] = useState([])
const [loading, setLoading] = useState([])
const URL = "myurl..."
useEffect(() => {
async function fetchData() {
const res = await axios.get(URL, {headers: {"x-access-token":memberToken}});
const response = await res;
console.log(response.data.data,'data')
//when I console log
// [{…}, {…}] "data"
//0: { name: "kevin", age: 39}
//1: { name: "john", age: 23}
console.log(response.data.data[0].title, 'name')
setData(response.data.data);
setLoading(false);
}
fetchData()
}, [])
return(
<View>
//I am trying to display fetched data
<Text>{data[0].name}</Text>
</View>
)
}
最佳答案
没有“被称为第一”。您的组件立即渲染，useEffect包含“副作用”-在组件渲染后的某个未知点发生的事情。
因此，data将在将来的某个时间设置，因此您必须先检查它是否可用，如果不可用，然后在其位置进行渲染，例如：
return(
<View>
<Text>{!data.length ? 'Loading...' : data[0].name}</Text>
</View>
)