React中子组件发帖后如何触发父组件调用API刷新帖子列表

父组件Feed负责展示帖子列表，初始加载时拉取全量帖子数据，实现代码如下：

function Feed() {

    const [posts, setPosts] = useState(null);

    useEffect(() => {
        const fetchPosts = async () => {
            try {
                const result = await axios({
                // 接口请求相关配置
                });
    
                setPosts(result.data);
                // 其他业务逻辑
            } catch (e) {
                // 异常捕获逻辑
            }
        };
        fetchPosts();
    }, []);

    return (
        // 其他页面结构
        {posts &&
            <div>
                <PostCompose />                              {/* 新建帖子组件 */}
                {posts.map((item, index) =>                  /* 遍历渲染已有帖子 */
                    <Post key={item._id} {...item} />)}      
            </div>
        }
        // 其他页面结构
    )
}

子组件PostCompose负责提交新帖子内容，实现代码如下：

function PostCompose() {

    const [text, setText] = useState('');

    const createPost = async () => {
        try {
            const result = await axios({
                // 新建帖子接口请求配置
            })
            // 请求成功后的业务逻辑
        } catch (e) {
            // 异常捕获逻辑
        }
    }

    const handleTextChange = (e) => {
        setText(e.target.value);
    }

    return (
        // 其他组件结构
        <textarea onChange={handleTextChange} />
        <button onClick={createPost}>Post</button>
        // 其他组件结构
    )
}

当前遇到的问题：PostCompose组件向后端发送新建帖子请求成功后，无法触发父组件Feed刷新拉取最新帖子列表，需要确认现有实现思路是否合理，以及对应的解决方法。

你当前的组件拆分思路是合理的，针对这个父子组件联动刷新的需求，有两种常规实现方式，可以根据业务场景选择：

方案1：父组件传递刷新回调给子组件（适配现有结构的通用实现） #

把拉取帖子列表的逻辑从useEffect中抽离为独立可复用的函数，将这个函数通过props传递给PostCompose子组件，子组件在新建帖子请求成功后直接调用该回调，即可触发列表重新拉取。
父组件改造后代码：

function Feed() {
    const [posts, setPosts] = useState(null);

    // 抽离拉取帖子的逻辑为独立函数
    const fetchPosts = async () => {
        try {
            const result = await axios({
                // 接口请求配置
            });
            setPosts(result.data);
        } catch (e) {
            // 异常处理逻辑
        }
    };

    useEffect(() => {
        fetchPosts(); // 页面初始加载时调用拉取方法
    }, []);

    return (
        // 其他页面结构
        {posts &&
            <div>
                {/* 将刷新回调通过props传递给子组件 */}
                <PostCompose onPostCreated={fetchPosts} />
                {posts.map((item) =>
                    <Post key={item._id} {...item} />)}      
            </div>
        }
        // 其他页面结构
    )
}

子组件只需要在新建请求成功后，调用父组件传入的回调即可触发刷新：

function PostCompose({ onPostCreated }) { // 接收父组件传递的刷新回调
    const [text, setText] = useState('');

    const createPost = async () => {
        try {
            await axios({
                // 新建帖子请求配置
            })
            // 请求成功后调用回调刷新帖子列表
            onPostCreated?.();
            // 可追加清空输入框、发布成功提示等逻辑
            setText('');
        } catch (e) {
            // 异常处理逻辑
        }
    }

    const handleTextChange = (e) => {
        setText(e.target.value);
    }

    return (
        // 其他组件结构
        <textarea value={text} onChange={handleTextChange} />
        <button onClick={createPost}>Post</button>
        // 其他组件结构
    )
}

细节注意：

• 原代码中textarea没有绑定value属性，属于不受控组件，建议加上value={text}改为受控组件，避免输入内容和组件state不同步。
• 遍历帖子列表时直接用帖子唯一标识item._id作为key即可，不需要额外使用数组索引index，索引作为key在列表增删、排序时容易引发组件渲染错误。

方案2：本地直接更新帖子列表（体验更优，减少冗余请求） #

如果新建帖子的接口返回值是完整的新帖子数据，不需要重新发起全量列表拉取请求，直接在本地将新帖子拼接到现有posts数组头部即可，既能省掉一次接口请求，用户感知的内容更新速度也更快。
父组件改造：

function Feed() {
    const [posts, setPosts] = useState(null);

    const fetchPosts = async () => {
        // 拉取逻辑和之前保持一致
    };

    useEffect(() => {
        fetchPosts();
    }, []);

    // 封装本地添加新帖子的方法
    const addNewPost = (newPost) => {
        setPosts(prevList => [newPost, ...prevList]); // 新帖子默认展示在列表最顶部
    };

    return (
        // 其他页面结构
        {posts &&
            <div>
                <PostCompose onPostCreated={addNewPost} />
                {posts.map((item) => <Post key={item._id} {...item} />)}      
            </div>
        }
        // 其他页面结构
    )
}

子组件改造：

const createPost = async () => {
    try {
        const result = await axios({
            // 新建帖子请求配置
        })
        // 假设接口返回的result.data为完整的新帖子数据，直接传给父组件更新列表
        onPostCreated?.(result.data);
        setText('');
    } catch (e) {
        // 异常处理逻辑
    }
}

• 现有组件拆分方式没有问题，当前场景下用props传回调是React官方推荐的最直接的实现方式，代码可读性和维护性都更好，不需要为了这个需求引入复杂的全局状态库。
• 不要使用强制刷新组件、固定轮询拉取这类实现，既会影响页面性能，后续排查问题也会增加额外成本。
• 如果后续组件嵌套层级变深，新建组件和帖子列表组件之间间隔3层以上，再考虑用Context或者状态管理库共享帖子状态即可，当前场景完全没必要。

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