React技术疑问：渲染前获取数据是否必须使用useState？

你的分析完全正确：异步请求完成后更新let声明的变量，React无法感知到这个变化，自然不会触发重渲染，所以组件首次渲染时拿不到最新数据。下面提供几种不用useState存储业务数据的可行方案：

方案一：useRef + 极简useState触发重渲染 #

用useRef存储实际数据，再用一个空的useState来强制触发一次重渲染，让组件读取ref里的最新值：

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

function YourComponent() {
    const resListRef = useRef([]);
    // 空状态仅用于触发重渲染
    const [, forceRender] = useState();

    useEffect(() => {
        query.find().then((resultQuery) => {
            resListRef.current = createResultListFromResultQuery(resultQuery);
            forceRender(); // 触发重渲染，组件会读取ref的最新数据
        });

        function createResultListFromResultQuery(resultQuery) {
            // 你的数据格式化逻辑
            return resultQuery.map(item => ({ id: item.id, name: item.name }));
        }
    }, []);

    return (
        <div>
            {resListRef.current.map(item => (
                <div key={item.id}>{item.name}</div>
            ))}
        </div>
    );
}

这个方案里，业务数据存在ref中，仅用一个无意义的状态触发一次重渲染，符合你不想用useState存业务数据的需求。

方案二：同步读取数据（仅适用于特定场景） #

如果你的数据库查询支持同步API（比如某些客户端本地数据库），可以直接在组件初始化时同步获取数据，不需要异步处理：

function YourComponent() {
    // 仅当query.find()是同步方法时可用
    const resultQuery = query.find();
    const resList = createResultListFromResultQuery(resultQuery);

    function createResultListFromResultQuery(resultQuery) {
        // 你的数据格式化逻辑
        return resultQuery.map(item => ({ id: item.id, name: item.name }));
    }

    return (
        <div>
            {resList.map(item => (
                <div key={item.id}>{item.name}</div>
            ))}
        </div>
    );
}

注意：这种方式会阻塞组件渲染，仅在数据量极小、读取极快的场景下使用。

方案三：React Suspense（需数据层支持） #

如果你的数据查询方案支持React Suspense（比如Relay、React Query的Suspense模式），可以让组件等待数据加载完成后再渲染，无需手动管理状态：

// 假设query.find()被包装为支持Suspense的异步函数
function YourComponent() {
    const resultQuery = query.find();
    const resList = createResultListFromResultQuery(resultQuery);

    function createResultListFromResultQuery(resultQuery) {
        // 你的数据格式化逻辑
        return resultQuery.map(item => ({ id: item.id, name: item.name }));
    }

    return (
        <div>
            {resList.map(item => (
                <div key={item.id}>{item.name}</div>
            ))}
        </div>
    );
}

// 在父组件中用Suspense包裹
function ParentComponent() {
    return (
        <React.Suspense fallback={<div>加载中...</div>}>
            <YourComponent />
        </React.Suspense>
    );
}

这个方案需要数据层提供Suspense支持，否则无法直接使用。

补充说明 #

其实你觉得useState“不合适”可能是个误解——对于首次加载异步数据并触发一次重渲染的场景，useState完全符合React的设计范式，是最简洁直接的方案。所谓“避免不必要的useState”，指的是不要用状态存储可以通过props或实时计算得到的数据，而你的场景是获取外部异步数据，属于组件必须管理的内部状态，用useState是完全合理的。

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