React使用useContext获取值时报Object undefined无法解构alert属性错误

错误原因 #

• 核心原因：useContext接收的参数必须是你通过React.createContext()创建的Context实例本身，你在Header、MyAlert组件中错误地将Provider组件ShowAlert传给了useContext，导致读取不到Context值，返回undefined，解构alert属性时报错。
• 潜在次要原因：如果修改入参后仍报错，说明你的应用根组件没有被ShowAlert组件包裹，所有要消费AlertContext的组件必须位于ShowAlert的子组件树中才能拿到Context值。

修复步骤 #

步骤1：修正消费Context时的入参 #

修改Header组件的导入和useContext调用：

// 原来的导入
// import ShowAlert from "../contexts/ShowAlert";
// 替换为导入AlertContext实例
import AlertContext from "../contexts/AlertContext";

// 原来的useContext调用
// const {alert} = useContext(ShowAlert);
// 替换为
const {alert, showAlert} = useContext(AlertContext);

同样修改MyAlert组件的对应代码：

// 原来的导入
// import ShowAlert from "../contexts/ShowAlert";
// 替换为
import AlertContext from "../contexts/AlertContext";

// 原来的useContext调用
// const {alert} = useContext(ShowAlert);
// 替换为
const {alert} = useContext(AlertContext);

步骤2：确保根组件被ShowAlert包裹 #

在你的应用入口文件（通常是index.js）中用ShowAlert包裹整个应用组件树，示例：

import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
import ShowAlert from './contexts/ShowAlert';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <ShowAlert>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </ShowAlert>
);

可选优化 #

你现在在Header组件中已经通过Context拿到了alert值，又通过props传给MyAlert，而MyAlert本身也直接消费Context拿alert，属于重复传值，可以删掉Header中<MyAlert alert={alert}></MyAlert>的props传值，直接写<MyAlert />即可。

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