如何实现Inertia与React无刷新页面的删除操作？

问题描述 #

当前删除文章后需要刷新页面才能看到数据变化，希望修改代码实现无刷新实时更新。

解决方案 #

1. 修改后端ArticleController的destroy方法 #

原代码删除后会重定向到/admin页面，这会触发页面刷新。我们需要改为返回无内容响应，避免页面跳转：

public function destroy(Article $article) {
    $article->delete();
    // 返回204无内容响应，告知前端删除成功
    return response()->noContent();
}

2. 前端React组件修改 #

有两种常见方式实现无刷新更新，选其一即可：

方式一：通过本地状态更新（推荐，性能更好）

• 父组件：持有文章列表的本地状态，传递删除成功的回调给子组件

import { useState } from 'react';
import { usePage } from '@inertiajs/react';
import ArticleItem from './ArticleItem';

function AdminArticles() {
  // 从Inertia页面props获取初始文章列表
  const { articles } = usePage().props;
  // 用本地状态管理文章列表
  const [localArticles, setLocalArticles] = useState(articles);

  // 删除成功后更新本地列表的回调
  const handleDeleteSuccess = (deletedArticleId) => {
    setLocalArticles(prev => prev.filter(article => article.id !== deletedArticleId));
  };

  return (
    <div className="articles-container">
      {localArticles.map(article => (
        <ArticleItem 
          key={article.id} 
          article={article} 
          onDeleteSuccess={handleDeleteSuccess} 
        />
      ))}
    </div>
  );
}

export default AdminArticles;

• ArticleItem子组件：删除成功后调用父组件的回调，同时关闭操作弹窗

import { useState } from 'react';
import { usePage, Inertia } from '@inertiajs/react';

function ArticleItem({ article, onDeleteSuccess }) {
  const { url } = usePage();
  const inAdminPage = url.includes('/admin');
  const [options, setOptions] = useState(false);

  const handleOptionsClick = () => setOptions(!options);

  function onDeleteSubmitEventHandler(e) {
    e.preventDefault();
    Inertia.delete(`/article/${article.id}`)
      .then(() => {
        // 通知父组件移除已删除的文章
        onDeleteSuccess(article.id);
        // 关闭操作选项弹窗
        setOptions(false);
      })
      .catch(err => {
        console.error('删除失败:', err);
        // 这里可以添加错误提示，比如弹出toast
      });
  }

  return (
    <>
      {/* 文章内容展示部分 */}
      {inAdminPage && (
        <>
          <div onClick={handleOptionsClick} className="hover:bg-gray-100 hover:cursor-pointer transition rounded-full p-2 relative">
            <img src="/icon/options.svg" className="w-1" alt="操作选项" />
          </div>
          {options && (
            <div id="options" className="absolute right-7 bottom-0 shadow-md">
              <ul>
                <form onSubmit={onDeleteSubmitEventHandler}>
                  <button type="submit" className="hover:bg-gray-200 hover:cursor-pointer bg-white px-4 py-3">删除</button>
                </form>
                <li className="hover:bg-gray-200 bg-white px-4 py-3">编辑</li>
              </ul>
            </div>
          )}
        </>
      )}
    </>
  );
}

export default ArticleItem;

方式二：重新请求当前页面数据（适合简单场景）

如果不想维护本地状态，可以在删除成功后，让Inertia重新加载当前页面的props，而不刷新整个页面：

修改ArticleItem的删除事件处理函数：

function onDeleteSubmitEventHandler(e) {
  e.preventDefault();
  Inertia.delete(`/article/${article.id}`)
    .then(() => {
      // 重新加载当前页面的props，保留页面状态和滚动位置
      Inertia.visit(window.location.pathname, {
        preserveState: true,
        preserveScroll: true,
      });
      setOptions(false);
    });
}

这种方式会让Inertia重新请求/admin页面的数据，更新页面props中的文章列表，从而实现无刷新更新。

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