React无法渲染数组对象求助：数据已填充但页面空白

你的问题出在**useEffect中处理异步操作的方式错误**，导致setData在数组还没真正填充完成时就被调用，React拿到空数组渲染后，后续数组填充不会触发重新渲染，所以页面空白。

核心问题 #

Array.map配合async/await时，map会返回一个由Promise组成的数组，但直接await这个数组并不会等待所有Promise执行完毕——因为await只能处理单个Promise，无法直接等待Promise数组。所以你的代码里，setData(arr)和setLoading(false)会在所有call_razor请求完成前就执行，此时arr还是空的，React用空数组渲染，自然看不到内容。后续arr被异步填充时，没有再次调用setData，组件不会重新渲染。

修复方案 #

使用Promise.all等待所有异步请求完成，它会接收一个Promise数组，返回一个新的Promise，当所有子Promise都resolve后，会返回包含所有结果的数组。

修改后的代码如下：

import { useEffect, useState } from 'react';

export default function EntitiesRecognized(props) {
    const [isLoading, setLoading] = useState(true);
    const [data, setData] = useState([]);

    const call_razor = async (sentence) => {
        return new Promise((resolve) => {
            setTimeout(() => resolve('200' + sentence), 2000);
        });
    };

    useEffect(() => {
        const dataFetch = async () => {
            // 用map生成Promise数组，再用Promise.all等待全部完成
            const results = await Promise.all(
                props.props.map(prop => call_razor(prop))
            );
            setData(results);
            setLoading(false);
        };
        dataFetch();
    }, [props.props]); // 注意：依赖项要加上props.props，避免props更新时不重新请求

    return (
        <div>
            {isLoading
                ? <h1>Loading</h1>
                : data.map((sentence, idx) => (
                    <h5 key={idx}>{sentence}<hr/></h5>
                ))
            }
        </div>
    );
};

关键修改点 #

1. 用Promise.all(props.props.map(...))替代原有的await map逻辑，确保所有异步请求完成后再获取结果数组。
2. 直接使用Promise.all返回的结果数组设置data，无需手动维护arr，避免异步操作顺序问题。
3. 给useEffect添加props.props作为依赖项——如果父组件传入的props.props更新，组件会重新执行数据请求，保证数据同步。
4. 简化了call_razor函数：因为setTimeout里不会抛出错误，原有的try/catch可以省略（如果实际场景中有网络请求，再添加错误处理即可）。

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