React新手求助：异步函数数据传递及组件内使用方法

1. 如何将数据传出异步函数 #

async 函数本身会返回 Promise，要获取它的结果，你需要在另一个 async 函数里用 await，或者用 .then() 方法。但在 React 组件场景下，最合理的方式是把获取到的数据存入组件的 state——这样数据更新时组件会自动重新渲染，自然就能在组件中使用这些数据。

2. 在 React 组件中使用异步获取的数据 #

你需要结合 useEffect 钩子触发数据请求（避免组件重复渲染时多次调用接口），再把数据存入 useState 定义的状态中。以下是修正后的完整代码：

const Books = () => {
    // 初始状态设为 null，匹配后续数组/对象的数据类型
    const [bookData, setBookData] = React.useState(null);

    async function getDat() {
        const res = await fetch('https://raw.githubusercontent.com/coderxdesigner/bookstore/main/src/json/childrens.json');
        const data = await res.json();
        // 直接将数据存入state，无需返回
        setBookData(data);
    }

    // 组件挂载时仅执行一次数据请求
    React.useEffect(() => {
        getDat();
    }, []); // 空依赖数组确保只执行一次

    return (
        <div className="row">
            <h1>Books</h1>
            {/* 先判断数据是否加载完成，避免报错 */}
            {bookData ? (
                bookData.books.map((itm, index) => (
                    <div key={index}>{itm.title}</div>
                ))
            ) : (
                <p>Loading...</p>
            )}
        </div>
    );
};

关键细节说明： #

• useEffect 触发请求：空依赖数组的 useEffect 只会在组件首次挂载时执行，避免重复调用接口。
• 状态更新驱动渲染：在 getDat 中调用 setBookData 存入数据，组件会自动重新渲染并使用最新数据。
• 条件渲染防报错：数据加载完成前，bookData 为 null，此时显示加载提示；数据就绪后再执行遍历渲染。
• 列表 key 属性：遍历列表时必须添加唯一 key，这里用索引是临时方案，优先使用数据自带的唯一标识（比如 itm.id）。

你原代码的几个问题：

• 未调用 getDat 函数，数据根本没发起请求；
• return 里的 data 变量未定义，应该使用状态 bookData；
• 初始状态设为空字符串，和后续数组数据类型不匹配，易引发错误。

内容的提问来源于stack exchange，提问作者dont-know