如何正确更新React Context中存储的State对象的属性？

你的写法存在4个核心错误，导致状态更新不生效甚至报错：

• 子组件中调用React.createContext()是完全错误的用法：createContext的作用是创建新的Context实例，不是读取已有Context的值，你在子组件新建的Context和App.js里Provider绑定的AuthContext没有任何关联，根本拿不到传递的car和setCar。
• 对setCar的使用方式完全错误：setCar是useState返回的状态更新函数，不是存储状态的对象，直接给setCar.data.offer赋值不符合React状态更新的语法规则，不会触发任何状态变更。
• 违反React状态不可变原则：React中state不能直接修改嵌套属性，必须传入全新的状态对象给更新函数，才能触发组件重渲染，直接改原对象的属性React检测不到变化，页面不会更新。
• 额外隐患：App.js中useState()没有设置初始值，首次渲染时car为undefined，访问car.data会直接抛出空值错误。

1. 修正App.js逻辑，导出Context实例 #

你需要把创建的AuthContext导出，供子组件导入复用，不要在子组件重复创建Context：

// App.js
import React, { useState } from 'react';

// 创建Context并导出，所有子组件复用这一个实例
export const AuthContext = React.createContext();

export default function App() {
  // 初始值设为null，原有判断逻辑不用改，也可以直接填入符合car结构的默认值
  const [car, setCar] = useState(null);

  return (
    <AuthContext.Provider value={{ car, setCar }}>
      <NavigationContainer>
        {car ? (
          <CustomerHomeStackNavigator />
        ) : (
          <Splash />
        )}
      </NavigationContainer>
    </AuthContext.Provider>
  )
}

2. 子组件正确读取Context、更新嵌套状态 #

子组件导入同一个AuthContext，用useContext钩子读取值，更新时做逐层浅拷贝保证不可变更新：

// 任意子组件文件
import React, { useContext } from 'react';
// 导入App.js中导出的AuthContext，路径按你实际的文件目录调整
import { AuthContext } from './App';

export default function CarInfoPanel() {
  // 从Context中解构出状态和更新方法
  const { car, setCar } = useContext(AuthContext);

  const handleUpdateOffer = () => {
    // 判空避免car为null时访问data报错
    if (!car) return;

    // 不可变更新：逐层拷贝旧状态，替换需要修改的字段
    setCar({
      // 拷贝car所有外层属性
      ...car,
      // 覆盖data字段：拷贝原data的所有属性，替换offer为新值
      data: {
        ...car.data,
        offer: "1000"
      }
    })
  }

  return (
    <div>
      <p>当前offer值：{car?.data.offer}</p>
      <button onClick={handleUpdateOffer}>将offer更新为1000</button>
    </div>
  )
}

• 所有用到同一个Context的组件，必须导入同一个创建好的Context实例，重复调用createContext会生成完全独立的新Context，无法读取Provider传递的值。
• 更新嵌套对象/数组类型的state时，必须保证所有被修改的层级都生成新的引用，直接修改原state的属性不会触发重渲染。
• 初始state为null/undefined时，读取state属性前一定要做判空处理，或者给useState传入符合结构的初始值，避免运行时报错。

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