Next.js中访问setState存储的嵌套对象属性显示undefined怎么办？

问题根源 #

1. 初始值类型不匹配：你用useState([])将user初始化为数组，但API返回的是对象结构，初次渲染时user是数组，自然不存在questionshead属性，访问user.questionshead.ans会返回undefined。
2. 异步加载时序问题：API请求是异步的，组件首次渲染时数据还未返回，此时直接访问嵌套属性会因属性不存在出现异常。

解决方案 #

步骤1：修正初始值

将user的初始值改为空对象（或带默认嵌套结构的对象），匹配API返回的数据类型：

// 方案1：空对象初始化
const [user, setUser] = useState({});

// 方案2：带默认嵌套结构，避免初次渲染时访问深层属性报错
const [user, setUser] = useState({ questionshead: {} });

步骤2：处理异步渲染的边界情况

有两种常用方式避免未加载完成时的undefined问题：

方式1：使用可选链操作符?.

可选链会自动跳过不存在的属性，不会抛出错误：

{/* 直接渲染HTML内容（因为ans是HTML字符串） */}
<div dangerouslySetInnerHTML={{ __html: user.questionshead?.ans }} />

方式2：条件判断渲染

先确认questionshead存在后再渲染：

{user.questionshead && user.questionshead.ans && (
  <div dangerouslySetInnerHTML={{ __html: user.questionshead.ans }} />
)}

修正后的完整代码

import { useState, useEffect } from 'react';

const YourComponent = ({ slug }) => {
  // 初始化空对象，匹配API返回结构
  const [user, setUser] = useState({});

  useEffect(() => {
    const getdata = async () => {
      const databody = { "slugs": slug };
      try {
        const res = await fetch('/api/question/view', {
          method: 'POST',
          body: JSON.stringify(databody),
          headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json'
          },
        });
        const data = await res.json();
        setUser(data);
      } catch (err) {
        console.error('数据获取失败:', err);
      }
    };
    getdata();
  }, [slug]); // 添加slug到依赖项，slug变化时重新请求数据

  return (
    <div>
      {/* 使用可选链安全访问并渲染HTML内容 */}
      {user.questionshead?.ans && (
        <div dangerouslySetInnerHTML={{ __html: user.questionshead.ans }} />
      )}
    </div>
  );
};

export default YourComponent;

额外注意点 #

• 因为ans是HTML格式的字符串，直接输出会显示标签文本，必须用dangerouslySetInnerHTML解析渲染。
• 给useEffect的依赖数组加上slug，确保slug变化时能重新发起请求，获取对应的数据。

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