子组件新增评论后父组件列表未自动刷新，如何实现即时更新？

问题核心是：BookItem组件的useAsync仅在bookId变化时才重新请求书籍数据，评论创建成功后未触发重新获取，因此UI无法自动更新。

以下是两种最简洁的实现方案，优先推荐第一种（若你的自定义useAsync支持手动刷新）：

方案1：利用自定义useAsync的手动刷新能力（最优） #

如果你的useAsync钩子实现中提供了手动触发刷新的方法（比如返回refresh函数），可直接将该方法传递给子组件，在评论创建成功后调用：

修改BookItem组件 #

const bookService = new BookService();

export function BookItem() {
  const { bookId } = useParams<{ bookId: string }>();
  const id = parseInt(bookId, 10);

  // 假设useAsync返回refresh方法用于手动刷新
  const { data: book, loading, refresh } = useAsync(
    () => bookService.loadBookWithComments(id),
    [id]
  );

  if (loading) return <p>Loading...</p>;
  if (!book) return <p>Book not found</p>;

  return (
    <div>
      <h1>{book.name}</h1>
      <ul>
        {book.comments.map((c) => (
          <li key={c.id}>
            <strong>{c.userId}</strong>: {c.text}
          </li>
        ))}
      </ul>

      {/* 将refresh方法传给子组件 */}
      <CommentForm bookId={book.id} onCommentCreated={refresh} />
    </div>
  );
}

修改CommentForm组件 #

const bookService = new BookService();

// 新增onCommentCreated回调参数
export function CommentForm({ bookId, onCommentCreated }: { bookId: number; onCommentCreated: () => void }) {
  const [text, setText] = useState("");
  const { trigger } = useAsyncAction(async () => {
    await bookService.createNewBookComment(bookId, text);
    // 评论创建成功后触发父组件刷新
    onCommentCreated();
    // 清空输入框
    setText("");
  });

  return (
    <form onSubmit={(e) => { e.preventDefault(); trigger(); }}>
      <textarea
        value={text}
        onChange={(e) => setText(e.target.value)}
        placeholder="Your comment…"
      />
      <button type="submit">Submit</button>
    </form>
  );
}

方案2：添加刷新触发状态（通用兼容方案） #

如果你的useAsync没有手动刷新能力，可通过添加一个状态变量作为依赖，强制useAsync重新执行数据请求：

修改BookItem组件 #

const bookService = new BookService();
import { useState } from 'react';

export function BookItem() {
  const { bookId } = useParams<{ bookId: string }>();
  const id = parseInt(bookId, 10);
  // 新增刷新触发状态，每次更新都会让useAsync重新执行
  const [refreshTrigger, setRefreshTrigger] = useState(0);

  const { data: book, loading } = useAsync(
    () => bookService.loadBookWithComments(id),
    [id, refreshTrigger] // 将refreshTrigger加入依赖数组
  );

  if (loading) return <p>Loading...</p>;
  if (!book) return <p>Book not found</p>;

  // 定义刷新函数，通过更新状态触发useAsync重新请求
  const handleCommentRefresh = () => {
    setRefreshTrigger(prev => prev + 1);
  };

  return (
    <div>
      <h1>{book.name}</h1>
      <ul>
        {book.comments.map((c) => (
          <li key={c.id}>
            <strong>{c.userId}</strong>: {c.text}
          </li>
        ))}
      </ul>

      <CommentForm bookId={book.id} onCommentCreated={handleCommentRefresh} />
    </div>
  );
}

修改CommentForm组件 #

同方案1中的修改，只需接受onCommentCreated参数并在提交成功后调用即可。

关于状态提升的说明 #

不需要手动提升评论状态到父组件。手动添加评论到本地数组虽能快速更新UI，但存在两个问题：

1. 无法同步其他用户新增的评论；
2. 若API请求失败，本地状态会与服务器数据不一致，增加错误处理复杂度。
   重新请求数据的方案更可靠，能保证UI始终与服务器数据保持一致。

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