我正在尝试使用异步等待时获取数据,但是在尝试渲染时出现错误。我认为这是因为我正试图在处于承诺状态时进行渲染。
最终游戏试图使之成为一个动作,我想将其与React redux一起使用。但是我想先从这里开始。
// App.js
import React, {useState, useEffect} from 'react';
import axios from "axios"
function App() {
const [data, setData] = useState({});
const [loading, setLoading] = useState(true);
useEffect(() => {
async function fetchData() {
const response = await axios(
'http://lr.test/api/players',
);
console.log('data',response.data);
setData(response.data);
//setLoading(false) //i tried to set loading to false when it is ready but this doesn't work
}
fetchData()
}, []);
return (
<ul>
{
data.map( (d) => {
console.log(d)
return (<li key={d.id}>{d}</li>)
})
}
</ul>
)
//这给我的错误不是函数,因此它在承诺时尝试呈现 //我如何解决这个问题?我尝试在绘制之前将checcking是数组,但这似乎不起作用。
我的控制台日志是
{} //first empty object
{data: Array(4)}
data: (4) [{…}, {…}, {…}, {…}]
__proto__: Object
答案 0 :(得分:1)
不是用空对象初始化data
const [data, setData] = useState({});
使用具有map
函数的空数组将其初始化:
const [data, setData] = useState([]);
这应该使初始渲染工作正常。
顺便说一句,如果您实际上是在记录response.data
,并且日志中显示了一个包含另一个data
属性的对象,则应该改用response.data.data
。