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

时间:2020-08-12 00:00:38

标签: reactjs promise react-hooks

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

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

1 个答案:

答案 0 :(得分:1)

不是用空对象初始化data

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

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

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

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

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