React项目SearchIcon未定义报错，搜索图标无法正常显示求助

报错核心原因是代码中SearchIcon变量未被定义或引入，结合你注释里提到的react-icons库，以下是具体解决步骤：

1. 安装react-icons依赖 #

在项目根目录执行命令安装依赖：

npm install react-icons
# 或使用yarn
yarn add react-icons

2. 引入目标图标组件 #

在文件顶部添加引入语句，从react-icons的gi库中导入搜索图标：

import { GiSearch } from "react-icons/gi";

3. 替换img标签为图标组件 #

react-icons提供的是React组件，无需使用img标签，直接使用引入的组件即可，还能通过props设置样式：

<GiSearch size={24} color="#666" />

修正后的完整代码 #

import React, { useEffect } from "react";
import { GiSearch } from "react-icons/gi";

// 注意移除apikey后的空格，否则API请求会失败
const API_URL = 'http://www.omdbapi.com?apikey=31915c5e'

const App = () => {
 
    const searchMovies = async (title) => {
        try {
            const response = await fetch(`${API_URL}&s=${title}`);
            const data = await response.json();
            // OMDB返回的搜索结果字段是大写S的Search，不是小写s
            console.log(data.Search); 
        } catch (error) {
            console.error('请求出错:', error);
        }
    }

    useEffect(() => {
        searchMovies('spiderman');
    }, []);

    return (
        <div className="app">
            <h1>MovieLand</h1>

            <div className="search">
                <input
                    placeholder="search for movies"
                />
                <GiSearch size={24} color="#666" />
            </div>

        </div>
    );
}

export default App;

额外补充两个细节：

• 原API_URL中apikey = 31915c5e的空格会导致API请求失败，已移除
• OMDB API返回的搜索结果字段为data.Search（大写S），而非data.search，否则会打印undefined

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