React中如何提取状态对象内的属性以简化访问写法？

算力阿峰

2026-10-6

方案1：解构赋值+兜底默认值（改动最小）

在组件渲染逻辑前对状态做提前解构，同时添加默认值兜底处理初始state为null的问题：

// 放在组件return之前即可
const { course = {}, userIDs = [] } = courseAndUserIDs || {};

后续直接用course.averageRating、course.categories、userIDs就能访问对应属性，不需要再加courseAndUserIDs.前缀。

兜底逻辑说明：初始状态为null时，courseAndUserIDs || {}会返回空对象避免解构报错，解构时给course、userIDs设置默认空值，避免访问属性时抛出Cannot read properties of undefined错误。

方案2：可选链语法简化（无需额外声明变量）

如果不想额外声明变量，可以直接用ES6可选链语法简化原有写法，同时自带空值容错效果：
原有写法courseAndUserIDs.course.property可简化为courseAndUserIDs?.course?.property，当中间某一层值为null/undefined时会直接返回undefined，不会抛出异常。

方案3：拆分独立状态（简化最彻底，适合高频使用场景）

直接把原来的复合状态拆分为两个独立状态，后续完全不需要加任何前缀：

// 替换原有状态声明
const [course, setCourse] = useState({});
const [userIDs, setUserIDs] = useState([]);
const [isErr, setIsErr] = useState(false);

useEffect(() => {
  fetch(`http://localhost:8080/courses/${id}`)
    .then(resp => resp.json())
    .then(data => {
      setCourse(data.course);
      setUserIDs(data.userIDs);
    })
    .catch(err => setIsErr(true));
// 注意：原代码useEffect依赖数组为空，若id会变化需要将id加入依赖避免闭包问题
}, [id])

拆分后直接通过course.property、userIDs即可访问对应值，是最简便的写法。