React中调用setState后组件未重新渲染的问题求助

我正在通过Youtube上的教程学习React。我查阅了很多解决方案，但未找到相似案例。我认为自己并未修改原数据，因为BlogList.jsx中的filter方法返回了一个过滤后的新数组，并且我将这个新创建的数组传入了setState（即setBlogs）。

问题代码 #

Home.jsx #

import { useState } from "react";
import BlogList from './BlogList';
import { blogData } from '../data';


function Home() {

    const [blogs, setBlogs] = useState(blogData);

    function handleDelete(id) {

        const newBlogs = blogs.filter((blog) => blog.id !== id);
        setBlogs(newBlogs);

        console.log(blogs);
        console.log(newBlogs);
    }
    
    return (
        <div className="home">
            <BlogList blogs={blogData} handleDelete={handleDelete}/>
        </div>
    );
}

export default Home;

BlogList.jsx #

function BlogList({ blogs, handleDelete }) {
    
    return (
        <div className="blog-list">
            {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</button>
                </div>
            ))}
        </div>
    );
}

export default BlogList;

data.js #

import { v4 as uuidv4 } from 'uuid';

// blog initial data.
const blogData = [
    {
        title: "Master HTML",
        body: "lorem ipsum...",
        author: "umaru-chan",
        id: uuidv4(),
    },
    {
        title: "CSS Is Hard!",
        body: "lorem ipsum...",
        author: "ebina-chan",
        id: uuidv4(),
    },
    {
        title: "JavaScript makes no sense",
        body: "lorem ipsum...",
        author: "kubo-san",
        id: uuidv4(),
    },
];

export { blogData };

问题原因及修复 #

核心问题 #

你在Home组件里给BlogList传递的是原始的blogData数组，而不是通过useState维护的状态blogs。哪怕handleDelete里正确更新了状态，BlogList始终渲染初始数据，页面自然不会有变化。

修复代码 #

修改Home组件的return部分，把blogs={blogData}改成blogs={blogs}：

return (
    <div className="home">
        <BlogList blogs={blogs} handleDelete={handleDelete}/>
    </div>
);

额外优化建议 #

1. 监听状态更新：React的setState是异步操作，直接在handleDelete里打印blogs会得到更新前的值，想要查看更新后的状态，可以用useEffect监听：

import { useState, useEffect } from "react";

// ... 其他代码

useEffect(() => {
    console.log("更新后的blogs:", blogs);
}, [blogs]);

2. 初始状态用副本：为避免意外修改原始的blogData，初始状态建议创建数组副本：

const [blogs, setBlogs] = useState([...blogData]);

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