React useContext: 如何在子组件中修改 Context 值

本文将介绍如何在 React 子组件中通过 useContext 获取并修改 Context Provider 中提供的值，并提供示例代码演示。

假设我们有一个 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 对象
};

总结：

使用 useContext 在子组件中获取 Context 提供的值。
使用 Context Provider 中提供的函数来修改值。
当 Context 中提供的值为对象时，使用深拷贝来避免直接修改原始对象。