React Context API中allBlogPosts数组无法插入新博客对象问题求助

问题根因 #

• 核心错误在WriteBlogPost.js的handleBlogPost提交逻辑：setAllBlogPosts(setBlogPost(blog))写法完全错误。React的useState返回的状态更新函数（setBlogPost）没有返回值，执行后返回undefined，相当于你直接把allBlogPosts赋值为undefined，自然无法存储博客数组。
• 额外冗余问题：Context中定义的blogPost状态完全无用，你在提交页已经用本地blog状态存了用户输入，不需要再同步更新Context的blogPost。
• 调试误区：React状态更新是异步的，你执行setAllBlogPosts后立刻打印allBlogPosts，拿到的永远是更新前的旧值，不代表实际更新失败。
• 排查点确认：要确认你的所有路由组件全部包裹在InputContextProvider内部，否则跨页面拿不到同一个Context状态。

修复代码 #

1. 修正WriteBlogPost.js提交逻辑 #

const handleBlogPost = () => {
    // 正确用法：把新的博客对象追加到原有数组末尾
    setAllBlogPosts(prev => [...prev, blog])
    history.push("/blogs")
}

2. 可选优化InputContext.js（删掉无用状态减少重渲染） #

import React, { useState, createContext, useMemo } from 'react'

export const InputContext = createContext();

const InputContextProvider = (props) => {
    // 删掉无用的单个blogPost状态，只保留存所有博客的数组即可
    const [allBlogPosts, setAllBlogPosts] = useState([]);

    const value = useMemo(() => ({ allBlogPosts, setAllBlogPosts }), [allBlogPosts])

    return (
        <InputContext.Provider value={value}>
            {props.children}
        </InputContext.Provider>
    )
}

export default InputContextProvider;

3. 修复AllBlogs.js列表渲染警告 #

// 给遍历生成的元素加唯一key属性，避免React渲染警告
{allBlogPosts.map((post) =>
    <div key={post.id}>
        <p>{post.title}</p>
        <p>{post.author}</p>
        <p>{post.text}</p>
    </div>
)}

优化方向 #

• 提交前加表单校验，判断标题、作者、内容是否为空，避免提交无效空博客
• 可以把allBlogPosts同步到localStorage做持久化存储，刷新页面不会丢失历史博客数据
• 后续如果博客数据量变大，可以把新增、删除博客的逻辑封装在Context内部，不需要对外暴露setAllBlogPosts，避免外部非法修改状态

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