ReactJS中使用splice方法后如何重新渲染页面？

问题根源 #

你直接修改了导入的静态数组HomeData，React不会监听外部静态数据的变化；同时删除按钮没有传递目标元素的id，导致删除逻辑无法定位正确元素。另外，你尝试用useNavigate/history刷新页面完全没必要——组件内部数据更新只需要通过React状态管理就能触发重新渲染。

修正方案 #

必须用React的useState钩子管理需要渲染的数据，状态更新时React会自动触发组件重新渲染。具体修改如下：

1. 修改Home.js代码

import React, { useState } from "react";
import "./HomeStyles.css";
import HomeData from "./HomeData";

function Home() {
    // 将静态数据转为组件内部状态
    const [data, setData] = useState(HomeData);

    function handleDelete(id) {
        // 用filter返回新数组，避免直接修改原状态（React要求状态不可变）
        setData(prevData => prevData.filter(item => item.id !== id));
    }

    return (
        <>
            <section className="home_section">
                <div className="home_container">
                    {data.map((item) => {
                        return (
                            <div className="Heading_container" key={item.id}>
                                <h1 className="home_heading">{item.heading}</h1>
                                {/* 点击时传递当前项的id */}
                                <button onClick={() => handleDelete(item.id)}>Delete</button>
                            </div>
                        );
                    })}
                    
                    <button className="submit_btn">Submit</button>
                </div>
            </section>
        </>
    );
}

export default Home;

关键说明

• 状态管理：通过useState把静态数组转为组件内部状态data，只有状态更新时React才会重新渲染组件。
• 不可变更新：删除元素时用filter生成新数组，而不是splice修改原数组——React依赖状态的引用变化来检测更新，直接修改原数组不会触发重新渲染。
• 传递参数：删除按钮通过箭头函数把当前元素的id传给handleDelete，确保能精准删除目标元素。

为什么useNavigate/history无效？ #

路由跳转是用来切换页面的，你的问题是组件内部数据没有触发重新渲染，和路由完全无关。只要正确使用React状态管理，就能实现数据更新后页面自动刷新。

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