如何使用扩展语法更新嵌套属性？useState setter未生效问题排查

问题描述 #

尝试更新嵌套在component中的roomPricePostDiscount变量，使用了useState的setBookingSummaryComponent setter函数及扩展语法，但更新未生效。不确定是扩展语法使用错误，还是setter未触发重渲染。

Component变量结构 #

{
  id: 1,
  content: {
    props: {
      roomInfo: {
        capacity: {
          // 其他数据
        },
        roomPricePostDiscount: 3000,
        // 其余属性
      }
    }
  }
}

尝试的代码 #

setBookingSummaryComponent((prevComponents) => {
  const updatedComponents = prevComponents.map((component) => {
    if (component.id === roomId) {
      console.log(component)
      return {
        ...component,
        roomInfo: {
          ...component.roomInfo,
          roomPricePostDiscount: updatedRoomPricePostDiscount,
        },
      };
    }
    return component;
  });
  return updatedComponents;
});

问题分析与解决 #

核心错误：嵌套路径不匹配 #

你的代码直接在component根层级扩展roomInfo，但原结构中roomInfo是嵌套在content.props下的——这相当于新增了一个根层级的roomInfo，而非修改目标嵌套属性，自然不会生效。

修正后的代码 #

setBookingSummaryComponent((prevComponents) => {
  return prevComponents.map((component) => {
    if (component.id === roomId) {
      // 逐层解构嵌套对象，确保每一层都是新对象，触发React重渲染
      return {
        ...component,
        content: {
          ...component.content,
          props: {
            ...component.content.props,
            roomInfo: {
              ...component.content.props.roomInfo,
              roomPricePostDiscount: updatedRoomPricePostDiscount,
            },
          },
        },
      };
    }
    return component;
  });
});

额外检查点 #

• 确认roomId的值与目标component的id完全匹配（注意数字/字符串类型是否一致）
• 确认updatedRoomPricePostDiscount是有效取值（不是undefined或未更新的旧值）
• 确保组件渲染时直接依赖bookingSummaryComponent状态（而非缓存的旧值）

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