npm run build报handleDelete未定义但已定义问题排查

报错原因 #

两个问题直接触发该报错：

• 核心问题：Home.js中调用了useState钩子，但未从react包中导入该方法，组件执行到状态定义行时会直接抛出引用错误，阻断后续handleDelete方法的定义流程，最终报出handleDelete未定义的错误。
• 潜在风险：BlogList组件接收的handleDelete参数没有设置默认兜底值，如果项目中其他位置调用BlogList时漏传该prop，同样会触发相同报错。

修复步骤 #

1. 在Home.js顶部补充useState的导入语句
2. 给BlogList组件的handleDelete入参设置空函数默认值，避免漏传prop时的运行时报错

修复后代码 #

BlogList.js #

const BlogList = ({blogs, title, handleDelete = () => {}}) => {
    return(
        <div className="blog-list">
            <h2>{title}</h2>
            {blogs.map((blog) => (
                <div className="blog-preview" key={blog.id}>
                    <h2>{blog.title}</h2>
                    <p>Written by {blog.author}</p>
                    <button onClick={() => handleDelete(blog.id)}>
                        Delete Blog
                    </button>
                </div>
            ))}
        </div>
    )
}

export default BlogList;

Home.js #

import { useState } from "react";
import BlogList from "./BlogList";

const Home = () =>{
    const [blogs, setBlogs] = useState([
        { title: 'My new website', body: 'lorem ipsum...', author: 'mario', id: 1 },
        { title: 'Welcome party!', body: 'lorem ipsum...', author: 'yoshi', id: 2 },
        { title: 'Web dev top tips', body: 'lorem ipsum...', author: 'mario', id: 3 }
    ]);

    const handleDelete = (id) => {
        const newBlogs = blogs.filter(blog => blog.id !== id);
        setBlogs(newBlogs);
    }
    return(
        <div className="Home">
            <BlogList blogs={blogs} title="All Blogs" handleDelete={handleDelete} />
        </div>
    );
}

export default Home;

修改完成后如果仍有异常，删除node_modules/.cache目录清除构建缓存，重新执行npm run build即可正常构建。

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