React中如何从分类帖子子组件向全部帖子父组件传递状态与API函数以实现Toast

核心思路是让父组件封装好包含API调用、状态更新、Toast触发的完整逻辑，然后把这个逻辑函数作为props传给子组件，子组件只需要在点击按钮时调用这个函数就行——毕竟状态和Toast都在父组件里，完全没必要子组件再把状态传回去。

父组件（全部帖子组件）代码示例 #

import { useState } from 'react';
import CategoryPosts from './CategoryPosts';

function AllPosts() {
  const [posts, setPosts] = useState([]);
  const [toastVisible, setToastVisible] = useState(false);
  const [toastMsg, setToastMsg] = useState('');

  // 打包所有逻辑：调用API、更新状态、弹Toast
  const updatePostsWithToast = async (categoryId) => {
    try {
      // 调用对应分类的API接口
      const res = await fetch(`/api/posts?category=${categoryId}`);
      const freshPosts = await res.json();
      // 更新父组件的帖子状态
      setPosts(freshPosts);
      // 显示成功Toast
      setToastMsg('帖子更新成功！');
      setToastVisible(true);
      // 3秒后自动隐藏Toast
      setTimeout(() => setToastVisible(false), 3000);
    } catch (err) {
      setToastMsg('更新失败，请稍后重试');
      setToastVisible(true);
      setTimeout(() => setToastVisible(false), 3000);
    }
  };

  // 渲染Toast组件
  const renderToast = () => {
    if (!toastVisible) return null;
    return <div className="toast-container">{toastMsg}</div>;
  };

  return (
    <div className="all-posts">
      {renderToast()}
      {/* 把封装好的函数传给子组件 */}
      <CategoryPosts triggerUpdate={updatePostsWithToast} />
    </div>
  );
}

export default AllPosts;

子组件（分类帖子组件）代码示例 #

function CategoryPosts({ triggerUpdate }) {
  // 点击更新按钮时，调用父组件传过来的函数，传入当前分类ID
  const handleUpdateBtnClick = (category) => {
    triggerUpdate(category);
  };

  return (
    <div className="category-posts">
      <button onClick={() => handleUpdateBtnClick('tech')}>更新技术帖</button>
      <button onClick={() => handleUpdateBtnClick('travel')}>更新旅行帖</button>
    </div>
  );
}

export default CategoryPosts;

关键说明 #

1. 遵循React单向数据流规则：所有状态（帖子列表、Toast显示状态）都在父组件维护，子组件只负责触发操作，不直接修改状态。
2. 子组件无需传递更新后的状态——API返回的新数据直接在父组件的逻辑函数里更新posts状态即可。
3. 如果需要子组件传递额外参数（比如分类ID），直接在调用父组件函数时传入，父组件的函数接收参数后处理即可。

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