reactjs - 类型错误：报价未定义。无法弄清楚为什么这个状态是未定义的

Question

我的目标：在加载时，使用 Axios 调用 API 来获取报价数据并将它们存储在报价状态中。然后，将引用设置为引用状态并将其呈现在屏幕上。将有一个按钮来生成新的报价。

这是我的代码：

function App() {
    // States
    const [quotes, setQuotes] = useState([]);
    const [quote, setQuote] = useState({
        quote: "",
        author: ""
    });

    const year = new Date().getFullYear();
    const getQuote = () => setQuote(quotes[Math.floor(Math.random() * quotes.length)]);

    useEffect(async () => {
        try {
            const res = await axios.get("https://gist.githubusercontent.com/camperbot/5a022b72e96c4c9585c32bf6a75f62d9/raw/e3c6895ce42069f0ee7e991229064f167fe8ccdc/quotes.json");
            setQuotes(res.data.quotes);
            getQuote();
        } catch (err) {
            console.error(err);
        }
    }, []);

    console.log(quote);


    return (
        <article id="quote-machine">
            <section id="quote-box">
                <div id="text"><i className="fas fa-quote-left"></i> <span>{quote.quote}</span> <i className="fas fa-quote-right"></i></div>
                <div id="author">- <span>{quote.author}</span></div>
                <div className="buttons">
                    <a href="twitter.com/intent/tweet" id="tweet-quote" target="_blank"><i className="fab fa-twitter-square"></i></a>
                    <div onClick={getQuote} id="new-quote"><i className="fas fa-chevron-circle-right"></i></div>
                </div>
            </section>
        </article>
    )
}

我错过了什么吗？我是最近才开始自学的，所以我欢迎任何建议或建议。

标签： reactjsasynchronousaxios