React异步List组件无编译错误但无法渲染且报错如何解决？

• 核心运行时错误：直接将React函数组件声明为async异步函数。React渲染组件时会同步执行函数获取要渲染的React元素，异步函数执行后返回的是Promise对象而非可渲染内容，直接导致渲染崩溃。这个问题属于运行时逻辑错误，语法上没有问题所以不会触发编译报错。
• 数据处理逻辑错误：randomuser.me接口返回的顶层数据是对象，你需要的用户列表存在返回值的results字段中，直接对整个返回对象执行map会抛出类型错误；同时遍历逻辑中写的item.results[1]属于完全错误的取值逻辑，既会重复嵌套取值也会出现索引越界问题。

按照React的规范，异步请求要放在useEffect钩子中执行，拿到结果后存入state再驱动渲染，修复后的代码如下：

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

const url = 'https://randomuser.me/api/?results=10';

function List() {
    // 声明state存储用户列表数据
    const [userList, setUserList] = useState([]);

    // 组件挂载后执行异步请求拉取数据
    useEffect(() => {
        const fetchUserData = async () => {
            const response = await fetch(url);
            const data = await response.json();
            // 取返回结果中的results数组赋值给state
            setUserList(data.results);
        };
        fetchUserData();
    }, []);

    return (
        <div>
            {/* 遍历用户列表渲染，必须加key属性避免React警告 */}
            {userList.map((item, index) => (
                <div key={index}>{item.name.first}</div>
            ))}
        </div>
    );
}

export default List;

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