子孙组件中如何修改通过 useContext 获取到的值举个例子说明

假设我们有一个 App 组件作为 Context 的 Provider，提供了一个名为 count 的状态值和一个名为 setCount 的方法，我们在子组件中通过 useContext 获取到了这个 count 值和 setCount 方法：

import React, { useContext } from 'react';
import { CountContext } from './App';

function ChildComponent() {
  const { count, setCount } = useContext(CountContext);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Add 1</button>
    </div>
  );
}

export default ChildComponent;

在子组件中，我们可以直接使用 useContext 获取到了 CountContext 中提供的 count 值和 setCount 方法，并且可以在点击按钮时调用 setCount 方法来修改 count 的值。

注意，如果 Context 中提供的值是一个对象，那么修改这个对象的属性时需要使用深拷贝来避免直接修改原始对象。例如：

const { user, setUser } = useContext(UserContext);

const handleUpdateUser = () => {
  const newUser = { ...user, age: user.age + 1 }; // 使用深拷贝创建一个新的 user 对象
  setUser(newUser); // 更新 Context 中的 user 对象
};