React初始化时如何将quote默认值设为quotes数组中的随机单条对象

你只需要在接口拉取到全量名言数据的回调中，同步触发一次随机名言赋值逻辑即可，同时可以顺便优化几个不合理的代码逻辑：

1. quote状态不需要用数组存储，直接存单个名言对象即可，省略多余的map遍历操作
2. 随机索引不要写死乘以100，改用实际获取到的名言列表长度作为基数，避免后续接口返回数据量变化时出现索引越界问题
3. 新增加载态提示，优化数据请求过程中的用户体验

修改后的完整代码如下：

import React from 'react'
import { useEffect, useState } from 'react'

const QuoteGenerator = () => {
    // 初始化状态：quote改为存储单个对象，默认值设为null
    const [quotes, setQuotes] = useState([])
    const [quote, setQuote] = useState(null)

    // 拉取名言列表，拿到数据后自动设置第一条随机名言
    useEffect(() => {
         fetch('https://jsonplaceholder.typicode.com/posts')
            .then(res => res.json())
            .then(data => {
                setQuotes(data)
                // 直接在数据返回后触发一次随机赋值
                const randomIndex = Math.floor(Math.random() * data.length)
                setQuote(data[randomIndex])
            })
}, [])

// 点击按钮更新名言逻辑
const setNewQuote = () => {
    const index = Math.floor(Math.random() * quotes.length)
    setQuote(quotes[index])
}

return (
    <div>
        <h1>Your Quote</h1>
        <br />
        <div>
            <h5>
                {/* 新增加载态判断，数据未返回时展示提示 */}
                {quote ? (
                    <div key={quote.id}>
                        <h3>{quote.title}</h3>
                    </div>
                ) : '名言加载中，请稍候...'}
            </h5>
        </div>
        <br />
        <button onClick={setNewQuote}>New quote</button>
    </div>
)
}

export default QuoteGenerator

如果你不想修改原来quote存储数组的逻辑，只需要在setQuotes之后调用一次setNewQuote()即可，无需其他改动。

内容的提问来源于stack exchange，提问作者AlexRod