POST 请求 ReactJS 后列表项未呈现

Posted 2023-03-07

【中文标题】POST 请求 ReactJS 后列表项未呈现

【英文标题】：Listitems not rendering after POST Request ReactJS

【发布时间】：2020-10-27 14:51:48

【问题描述】：

我的应用中有评论部分，我正在尝试使用 axios.post 请求添加新评论。

这里是 (Sequelize,nodeJS) ： let commentArrayNew=[]

 app.post('/addComment/:id', (req, res) => 
    commentArrayNew.push(req.body.comment)
    Posts.update(
            comment: commentArrayNew
        ,
        
            where: 
                id: req.params.id
            
        ).then((post) => 
        res.send(post)
    ).catch((err) => 
        console.log("err", err);
    );
    )

在我的前端，每当我发送请求时，它都会给我状态 200，但它不会在页面上呈现新项目。

这是我的 FE 请求

axios.post(`http://localhost:4000/addComment/$id`, 
                comment: commentValue.value
            )
                .then((res) => 
                    window.location.reload();
                    const comment : any = res.data
                    if(commentValue) 
                        dispatch(actions.addComment(comment))
                    
                    console.log('--------location', location.state);
                )
                .catch((err) => 
                    toast.info("Server error")
                    console.log('--------err', err);
                )

我正在使用 useLocation 从另一个组件发送状态：

 const grabCommentsFromLocation = () => 
    if (location.state) 
        let commentArray = location.state.post.items.comment
        let listItems = commentArray.map((item: Object[]) => return <p key=uuidv4()>item</p>)
        return listItems
    

这里是我渲染我的项目的地方：

<div>
                    <p>Comment : </p>
                    grabCommentsFromLocation()
                </div>

这是我的 redux 调度函数：

export const addComment = (payload : any) => 
return 
    type: actionTypes.ADD_COMMENT,
    payload



 case actionTypes.ADD_COMMENT:
        return 
            ...state,
            posts : [
                ...posts,
                
                    comment : action.payload.comment,
                
            ]

        

即使评论保存到数据库中，项目仍然没有显示，有什么建议吗？

【问题讨论】：

你在API调用后做window.location.reload，数据不会丢失吗？

即使我删除该行，我也会得到相同的结果

您是否尝试在您的ADD_COMMENT 操作中记录action.payload.comment？更新后的值可用吗？

是的，它们可用

【参考方案1】：

你必须使用 res.status(200).json(post);而是 res.send(post)

【讨论】：

res.setHeader('Content-Type', 'application/json');试试这个兄弟

没有错误只是相同的结果，它没有显示在FE端

res.setHeader('Content-Type', 'application/json');在 res.send 之前添加这个

让我们continue this discussion in chat。