React组件中Fetch请求延迟与无响应场景的技术问询

问题1：若Fetch请求的响应耗时3秒返回，应用在前3秒是否会无内容显示，待useEffect触发重渲染后才展示数据？ #

是的，前3秒页面只会显示空的.project-container容器，不会展示任何数据内容。原因如下：

• 组件初始状态下，data被设为空数组[]，return中的条件渲染{data.length > 0 && ...}不满足，因此内部的.data-container及数据项不会被渲染。
• 当3秒后请求完成，setData(json)会更新data状态，触发第一次重渲染；随后setDataLoaded(true)会触发第二个useEffect，该钩子会再次通过setData([...newArray])更新data，触发第二次重渲染。直到这两次重渲染完成后，data.length > 0条件成立，数据列表才会被渲染展示。

问题2：若数据始终无法加载成功，应用仅会显示空div还是程序会崩溃？ #

应用只会显示空的.project-container div，不会崩溃。原因如下：

• 代码中fetchData函数的catch块捕获了请求过程中的所有错误，仅会在控制台打印错误信息，不会抛出未捕获的异常，因此不会导致程序崩溃。
• 加载失败时，data始终保持初始的空数组状态，dataLoaded也不会被设置为true，条件渲染的内容始终不会触发，最终页面上仅存在外层的空容器。

附相关React组件代码 #

import './MyProjects.css'
import {useState, useEffect, useRef} from 'react'

const MyProjects = () => {
    const [data, setData] = useState([])
    const [dataLoaded, setDataLoaded] = useState(false)
    let clone = useRef(null);

    const mapNewProperty = (item, color) => {
        return {...item, backgroundColor: color}
    }

    async function fetchData() {
        await fetch('https://jsonplaceholder.typicode.com/todos')
        .then(response => response.json())
        .then(json => {
            setData(json)
            clone.current = [...json]
            setDataLoaded(true)
        })
        // .then(setData(data.map((item) => ({...item, backgroundColor: true}))))
        .catch((err) => {
            console.log(err);
          });
    }

    useEffect(() => {
        fetchData()
    }, [])

    useEffect(() => {
        if (!dataLoaded) return
        const newArray = clone.current.map(item => mapNewProperty(item, 'red'));
        // console.log(clone.current)
        setData([...newArray])
        console.log(data)
    }, [dataLoaded]);


  return (
    <div className='project-container'>
        {data.length > 0 && (
                <div className='data-container'>
                {data.map(item => (
                    <div key={item.id} style={{backgroundColor : item.backgroundColor}} onClick={() => {
                    }}
                    className='dataItem'>{item.title}</div>
                ))}
                </div>
        )}
    </div>
  )
}

export default MyProjects

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