React中useMutation首次获取数据返回undefined，如何首次获取有效数据？

首先明确：没办法让组件首次渲染时就拿到有效元素，因为useMutation发起的是异步请求，请求需要时间完成，首次渲染时请求还没返回结果，data自然是初始的undefined。但可以通过以下方式优化逻辑，避免undefined带来的问题：

1. 利用加载状态做兜底展示 #

useMutation会返回isLoading和error状态，用它们在数据未就绪时展示加载提示或错误信息，避免渲染空内容或报错：

const [me, { data, isLoading, error }] = useMutation(ME_MUTATON);
const User = data?.me;

useEffect(() => {
    me();
}, [me]);

// 加载中或出错时的兜底
if (isLoading) return <div>加载中...</div>;
if (error) return <div>加载失败：{error.message}</div>;

// 数据就绪后再渲染内容
return <div>用户名：{User.userName}</div>;

2. 提前在服务端或组件挂载前获取数据 #

如果是Next.js这类支持服务端渲染的框架，可以在页面的服务端逻辑里提前获取数据，把数据作为props传入组件，这样组件首次渲染就有现成的数据：

// 页面组件
export default function Profile({ initialUser }) {
    const [me, { data }] = useMutation(ME_MUTATON);
    // 优先用请求返回的新数据，没有则用服务端预取的初始数据
    const User = data?.me || initialUser;

    return <div>用户名：{User.userName}</div>;
}

// Next.js服务端预取逻辑
export async function getServerSideProps() {
    // 直接调用API获取用户数据（和ME_MUTATION对应接口一致）
    const res = await fetch(process.env.NEXT_PUBLIC_API_URL + '/me');
    const initialUser = await res.json();

    return { props: { initialUser } };
}

3. 给User设置默认兜底对象 #

如果不想展示加载状态，可以给User设置一个默认对象，避免访问属性时出现Cannot read property 'userName' of undefined的错误：

const [me, { data }] = useMutation(ME_MUTATON);
// 当data.me不存在时，用默认对象兜底
const User = data?.me || { userName: '访客' };

useEffect(() => {
    me();
}, [me]);

console.log(User.userName); // 首次渲染会输出'访客'，请求完成后输出真实用户名

4. 依赖数据的逻辑放到 useEffect 中监听 #

如果有需要在User存在时执行的逻辑，一定要放到监听User变化的useEffect里，确保只有当User有效时才执行：

const [me, { data }] = useMutation(ME_MUTATON);
const User = data?.me;

useEffect(() => {
    me();
}, [me]);

// 监听User变化，只有User存在时才执行逻辑
useEffect(() => {
    if (User) {
        console.log("用户名：", User.userName);
        // 比如初始化用户相关的状态、调用其他依赖用户的接口等
    }
}, [User]);

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