React Hook Async 等待如何在 Promise 上保持渲染

Question

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

最终游戏试图让这成为一个动作，我想将它与 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>
       )
          

//这给我的错误不是一个函数，所以当它是一个promise时它会尝试渲染 //我该如何解决这个问题？我尝试在渲染之前检查数组，但这似乎不起作用。

我的控制台日志是

{} //first empty object

{data: Array(4)}
data: (4) [{…}, {…}, {…}, {…}]
__proto__: Object

Answer 1

而不是用空对象初始化data

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

使用具有map 函数的空数组对其进行初始化：

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

这应该使初始渲染工作。

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