React应用中使用MUI SearchIcon组件出现运行时错误求助

问题说明 #

在React项目中引入@mui/icons-material的SearchIcon组件到Header.js后，出现两个问题：

• 运行时抛出错误：Cannot read properties of null (reading 'useContext')
• ESLint控制台警告：提示img元素必须包含alt属性（代码中已添加该属性）

相关代码片段 #

App.js #

import './App.css';
import Header from './Header';

function App() {
  return (
    <div className="app">
      <Header />
      {/* Home */}
    </div>
  );
}

export default App;

Header.js #

import React from 'react'
import './Header.css';
import SearchIcon from '@mui/icons-material/Search';

function Header() {
return (
<div className='header'/>
<img alt="Amazon Logo" src="https://pngimg.com/uploads/amazon/amazon_PNG11.png" />
<div className='header__search'/>
<input className='header__searchInput' type='text' />
<SearchIcon className='header__searchIcon' />
</div>

);
}

export default Header;

package.json #

{
  "name": "amazon-clone",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.11.1",
    "@emotion/styled": "^11.11.0",
    "@mui/material": "^5.14.3",
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "firebase": "^10.1.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

错误与警告详情 #

运行时错误（localhost:3000） #

Uncaught runtime errors:
×
ERROR
Cannot read properties of null (reading 'useContext')
TypeError: Cannot read properties of null (reading 'useContext')
// ... (错误详情)

ESLint控制台警告 #

WARNING in [eslint]
src\Header.js
Line 8:9:  img elements must have an alt prop, either with meaningful text, or an empty string for decorative images
// ... (警告详情)

解决方案 #

1. 修复Header.js的JSX结构错误 #

React组件的return必须返回单个根元素，且标签需正确闭合。原代码中<div className='header'/>为自闭合标签，导致后续元素脱离根容器，末尾多余的</div>也造成标签不匹配。修改后的Header.js：

import React from 'react'
import './Header.css';
import SearchIcon from '@mui/icons-material/Search';

function Header() {
  return (
    <div className='header'>
      <img alt="Amazon Logo" src="https://pngimg.com/uploads/amazon/amazon_PNG11.png" />
      <div className='header__search'>
        <input className='header__searchInput' type='text' />
        <SearchIcon className='header__searchIcon' />
      </div>
    </div>
  );
}

export default Header;

2. 安装缺失的MUI图标依赖 #

package.json中未包含@mui/icons-material包，执行以下命令安装：

npm install @mui/icons-material
# 或使用yarn
yarn add @mui/icons-material

3. 确认ESLint警告修复 #

修复JSX结构后，ESLint可正确解析img标签的alt属性，警告会自动消失。若仍有警告，需检查alt属性规范：装饰性图片用空字符串alt=""，功能性图片使用有意义的描述文本。

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