React.js使用state hook实现前端无刷新更新时posts.map报错

问题表现 #

• 预期目标：发送帖子更新、删除请求后，前端无需手动刷新即可同步最新内容
• 运行报错：提交更新请求后控制台抛出posts.map is not a function错误
• 刷新异常：手动刷新页面后可看到更新后的帖子内容，但标签区域会生成重复的多余标签

对应运行场景截图：

现有代码 #

父组件 Profile.jsx #

逻辑：页面初始化时拉取当前用户的所有帖子存入posts状态，将状态更新方法setPosts通过props传递给每条帖子对应的子组件，预期子组件操作后直接更新父组件状态实现无刷新。

import { useEffect, useState } from 'react'
import PostContainer from './PostContainers'

export default function Profile({currentUser}){

    const [posts, setPosts] = useState()

     useEffect(() => {
        fetch(`/post/${currentUser.id}`)
        .then((r) =>{
          if(r.ok){
              r.json().then((posts)=>setPosts(posts))
          }
      })
    }, [])
    
    return(
        <div>
            <h1>Hello {currentUser.username}</h1>
            <h3>What's on your mind today?</h3>
            <div className='postWrapper'>
                <h2>Your Posts</h2>
                <div className='postLists'>
                    {posts?.map((post)=>{
                        return <PostContainer setPosts={setPosts} post={post} key={post.id} />
                    })}
                </div>
            </div>
        </div>
    )
}

子组件 PostContainer.jsx #

逻辑：负责单条帖子的展示、删除、编辑提交功能，请求返回后调用父组件传入的setPosts尝试更新状态。

import { useState } from 'react';

export default function PostContainer({setPosts, post}){
    const [isShown, setIsShown] = useState(false);
    const [title, setNewTitle] = useState("");
    const [content, setNewContent] = useState("");
    const [tags, setNewTags] = useState("");
    const userId = post.user_id;

// 发送删除请求
    function handleDelete(e){
        e.preventDefault();
        fetch(`/post/${post.id}`,{
            method: "DELETE",
            headers: {
                'Content-Type':'application/json'
            },
            body: JSON.stringify(post)
        })
        .then((r) => r.json())
        .then((x)=>setPosts(x), alert("Post Removed"))
    }

    // 点击编辑按钮预填现有内容，展示表单
    const handleUpdate = (e) =>{
        e.preventDefault();
        setIsShown(current => !current)
        // 预填表单默认值
        setNewTitle(post.title);
        setNewContent(post.content);
        setNewTags(post.tags.map((x)=>x.name))
    }

    // 发送PATCH更新请求
    function handleSubmit(e){
        e.preventDefault();
        const patchedPost = {
            title,
            content,
            userId,
            tags_attributes: tags.split(',').map((el) => { return {name: el} })
        }

        fetch(`/post/${post.id}`, {
            method: "PATCH",
            headers: {
                "Content-Type": "application/json"
            },
            body: JSON.stringify(patchedPost)
        })
        .then((r)=>r.json())
        .then((x) => setPosts(x), alert("Post updated"))
        setIsShown(false)
    }
    
    return(
    <div>
        <div>
        {isShown && (
            <div>
                <form className='update-form' onSubmit={handleSubmit}>
                    <label>Title</label><br/>
                    <textarea type='text' value={title} onChange={(e)=>setNewTitle(e.target.value)}></textarea><br/>
                    <label>Content</label><br/>
                    <textarea type='text' value={content} onChange={(e)=>setNewContent(e.target.value)}></textarea><br/>
                    <label>Tags</label><br/>
                    <textarea type='text' value={tags} onChange={(e)=>setNewTags(e.target.value)}></textarea><br/>
                    <button type='submit'>Update</button>
                    <button onClick={(e)=>{e.preventDefault(); setIsShown(false)}}>Cancel</button>
                </form>
            </div>
        )}
        </div><br/>
        <div className='postContainer'>
            <h1>{post.title}</h1>
            <p className="users-posts-content">{post.content}</p>
            <p>Tags: {post.tags.map((x)=> x.name).join(', ')}</p>
            <button onClick={(e)=>handleUpdate(e)}>Update</button> 
            <button onClick={(e)=>handleDelete(e)}>Delete Post</button>
        </div>
    </div>
    )
}

根因与修复方案 #

1. posts.map is not a function 报错修复 #

posts状态初始化存储的是用户所有帖子组成的数组，但更新、删除请求的接口返回值是单条帖子对象/删除操作的响应结果（非数组类型），直接将非数组值传入setPosts后，后续渲染调用数组方法.map()就会触发类型错误。
修复步骤：

• 给posts设置数组类型初始值，避免初始加载阶段的类型异常：

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

• 不要直接用接口返回的单条数据覆盖整个posts列表，基于原有状态做不可变更新：
  • 更新操作：遍历原有帖子数组，将id匹配的帖子替换为接口返回的最新内容，其余帖子保持不变
  • 删除操作：过滤掉id匹配的被删除帖子，返回剩余帖子组成的新数组
    对应修改请求回调逻辑：

  // PATCH更新请求回调
  .then((updatedPost) => {
    setPosts(prevPosts => prevPosts.map(p => p.id === post.id ? updatedPost : p))
    alert("Post updated")
  })
  
  // DELETE删除请求回调
  .then(() => {
    setPosts(prevPosts => prevPosts.filter(p => p.id !== post.id))
    alert("Post Removed")
  })
  

2. 刷新后标签重复问题修复 #

提交更新时，前端直接将输入的标签转为tags_attributes传给后端，后端嵌套属性配置默认做新增操作，不会删除旧标签，导致同名标签重复追加。
修复方式：

• 前端提交前对标签做去重、去空格处理，避免提交重复标签：

  tags_attributes: [...new Set(tags.split(',').map(el => el.trim()))].map((el) => { return {name: el} })
  

• 后端如果使用Rails等框架的accepts_nested_attributes_for配置，增加标签替换逻辑，或者给需要删除的旧标签传入_destroy: true参数，避免每次更新都新增标签记录。

3. 其他逻辑问题修复 #

当前.then()的参数写法有误，alert会在请求发送后立即执行，不会等待请求完成，需要将提示逻辑写在回调函数体内，参考前面给出的回调写法即可。

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