React中使用useContext传递更新Context中State的正确实现方式

错误原因 #

你触发报错的核心问题是没有正确导出/导入你创建的UserContext对象：

1. App.js中创建的UserContext仅声明了变量，没有做导出操作
2. Home.js中import UserContext from '../../App'导入的是App组件的默认导出，而不是你创建的Context对象，导致useContext接收的参数是undefined，返回值也是undefined，访问undefined.name自然触发类型错误。
   另外你的代码还缺少React相关API的导入，也会导致运行报错。

修正后可运行代码 #

App.js

// 导入需要的React API
import { useState, createContext } from 'react';
import Home from './components/Home';

// 创建Context并命名导出
export const UserContext = createContext();

function App() {
  const [name, setName] = useState('Name');

  return (
      <UserContext.Provider value={{name, setName}}>
        <Home/>
      </UserContext.Provider>
  );
}

export default App;

Home.js

// 导入需要的API和命名导出的UserContext
import { useContext } from 'react';
import { UserContext } from '../../App';

function Home() {
    const user = useContext(UserContext);

    return (
        <>
        <label>Your name:</label>
        <input type='text' onChange={e => user.setName(e.target.value)} />
        <p>{user.name}</p>
        </>
    )
}

export default Home;

useContext传递状态的标准实现流程 #

• 第一步：创建Context并导出
  调用createContext(默认值)创建Context对象并导出，默认值仅在消费组件没有被对应Provider包裹时生效。
• 第二步：父组件挂载Provider
  用<Context.Provider value={共享数据}>包裹所有需要消费该Context的后代组件，value属性支持传入任意类型数据，包括状态、更新状态的方法、函数等。
• 第三步：后代组件消费Context
  导入对应的Context对象，调用useContext(Context对象)即可直接拿到Provider传入的value值，可直接在组件逻辑、渲染中使用。

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