如何在React Context中更新嵌套对象的单个属性

更新嵌套对象时必须遵循React的不可变性原则——不能直接修改原状态对象，必须创建新的对象层级副本，否则React无法检测到状态变化，不会触发组件重新渲染。以下是两种可行的实现方式：

方案一：在Context中封装专用更新函数（推荐） #

在Provider内部封装一个通用的更新函数，子组件只需调用该函数传入参数即可，无需处理复杂的对象解构逻辑，同时保证代码复用性。

修正并完善后的Context代码：

import { createContext, useState } from "react";
const TeethInfoContext = createContext();

export function TeethInfoProvider({ children }) {
  const [teethInfo, setTeethInfo] = useState({
    11: {
      mesial: true,
      distal: false,
      incisal: false,
    },
    12: {
      mesial: true,
      distal: false,
      incisal: false,
    },
    13: {
      mesial: true,
      distal: false,
      incisal: false,
    },
  });

  // 封装更新牙齿属性的通用函数
  const updateToothProperty = (toothId, property, value) => {
    setTeethInfo(prevState => ({
      ...prevState, // 复制外层对象
      [toothId]: {
        ...prevState[toothId], // 复制目标牙齿的对象
        [property]: value // 更新指定属性
      }
    }));
  };

  return (
    <TeethInfoContext.Provider
      value={{ teethInfo, updateToothProperty }}
    >
      {children}
    </TeethInfoContext.Provider>
  );
}

export default TeethInfoContext;

子组件中调用示例：

import { useContext } from "react";
import TeethInfoContext from "./TeethInfoContext";

function ToothControl() {
  const { updateToothProperty } = useContext(TeethInfoContext);

  const handleToggleMesial = () => {
    // 将11号牙齿的mesial设为false
    updateToothProperty('11', 'mesial', false);
  };

  return <button onClick={handleToggleMesial}>关闭11号牙近中面标记</button>;
}

export default ToothControl;

方案二：子组件中直接正确调用setTeethInfo #

如果不需要复用更新逻辑，也可以在子组件中直接处理状态更新，但必须严格遵循不可变性：

import { useContext } from "react";
import TeethInfoContext from "./TeethInfoContext";

function ToothControl() {
  const { teethInfo, setTeethInfo } = useContext(TeethInfoContext);

  const handleToggleMesial = () => {
    setTeethInfo(prevState => ({
      ...prevState,
      11: {
        ...prevState[11],
        mesial: false
      }
    }));
  };

  return <button onClick={handleToggleMesial}>关闭11号牙近中面标记</button>;
}

export default ToothControl;

常见错误原因 #

之前的更新方法失效，大概率是因为直接修改了原状态对象（比如teethInfo[11].mesial = false后直接调用setTeethInfo(teethInfo)），这种操作没有改变对象的引用地址，React会判定状态未发生变化，因此不会触发重新渲染。

另外注意修正原代码中的语法错误：useState的初始化对象未闭合、多余的逗号，以及Provider value中未定义的cordinates和drawShape属性，这些问题也会导致代码无法正常运行。

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