React Hook Async等待如何保持承诺的渲染

问题描述

我正在尝试使用异步等待时获取数据，但是在尝试渲染时出现错误。我认为这是因为我正试图在处于承诺状态时进行渲染。

最终游戏试图使之成为一个动作，我想将其与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

解决方法

不是用空对象初始化data

const [data,setData] = useState({});

使用具有map函数的空数组将其初始化：

const [data,setData] = useState([]);

这应该使初始渲染工作正常。

顺便说一句，如果您实际上是在记录response.data，并且日志中显示了一个包含另一个data属性的对象，则应该改用response.data.data。