无法在 Mern 堆栈应用程序中使用 axios.put 更新 mongodb 对象

Question

我需要从我的 mongodb 数据库“cmets”集合中更新我的“comment”对象。更具体地说，当我按下“Like”按钮时，我想使用 axios 发送一个 put 请求，我可以在“comment”对象中将 +1 添加到“likes”。

所有其他操作都工作正常（获取 cmets、添加它们等），我唯一苦苦挣扎的是更新评论喜欢。

如果有人能提供帮助，我将不胜感激。提前致谢！

在这里我添加了我的代码：

//--------CommentComponent.js

import React, { useState, useEffect } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { getComments, updateComment } from '../actions/commentActions'

const PostPage = ({ match }) => {
    
const commentz = useSelector(store => store.comment.comments)
const dispatch = useDispatch()

useEffect(() => {
    dispatch(getComments())
}, [dispatch])

const handleLike = e => {
    dispatch(updateComment(e.target.id))
}

return (
    {commentz ? commentz.map(comm => 
        comm.forWich === match.params.id ?
            <div key={comm._id} className={styles.comment}>
                <div>
                    <h2>{comm.name}</h2>
                </div>
                <div>
                     <p>{comm.comment}</p>
                </div>
                     {comm.likes} <button id={comm} onClick={handleLike}>Like</button>
                <div>
            </div>
        : null
    ) : null}
    )
}

export default PostPage

//-------Comment.js

const mongoose = require('mongoose');
const Schema = mongoose.Schema;

// Create Schema
const CommentSchema = new Schema({
    name: {
        type: String,
        required: true
    },
    email: {
        type: String,
        required: true
    },
    comment: {
        type: String,
        required: true
    },
    forWich: {
        type: String,
        required: true
    },
    likes: {
        type: Number,
        default: 0
    },
    date: {
        type: Date,
        default: Date.now
    }
});

module.exports = Comment = mongoose.model('comment', CommentSchema);

//-------cmets.js

const express = require('express');
const router = express.Router();

// Comments Model
const Comment = require('../../models/Comment');

// @route UPDATE api/comments
// @desc Update comment
// @access Public
router.put('/:id', (req, res, next) => {
    Comment.findbyId(req.params.id)
       .then(comment => comment.update(req.body))
       .catch(next);
})

module.exports = router;

//--------CommentActions.js

import axios from 'axios';
import { 
    GET_COMMENTS,
    ADD_COMMENTS,
    COMMENTS_LOADING,
    GO_COMMENTS,
    UPDATE_COMMENTS
} from './types';



export const updateComment = comment => {
    return function(dispatch) {
        axios
            .put(`/api/comments`, comment)
            .then(res =>
                dispatch({
                    type: UPDATE_COMMENTS,
                    payload: comment
                })
            )
    }
}

//--------CommentReducer.js

import {
    GET_COMMENTS,
    ADD_COMMENTS,
    COMMENTS_LOADING,
    GO_COMMENTS,
    UPDATE_COMMENTS
} from '../actions/types';

const initialState = {
    comments: []
}

export default function(state = initialState, action) {
    switch(action.type) {
        case UPDATE_COMMENTS:
            return {
                ...state,
                comments: state.comments.map(comm => comm._id === action.payload._id ? comm.likes = action.payload + 1 : comm.likes)
    }
}
}

Answer 1

我做了一点改动：

1. 评论模型“喜欢”变成了一个对象数组，因此我可以存储评论的 ID、喜欢评论的访问者的 ID（将在页面加载时创建，在 localStorage 的帮助下）和日期当点赞按钮被点击时：

models/Comment.js：

const mongoose = require('mongoose');
const Schema = mongoose.Schema;

// Create Schema
const CommentSchema = new Schema({
    likes: [
        {
            commentId: {
                type: String,
                required: true
            },
            userId: {
                type: String,
                required: true
            },
            date: {
                type: Date,
                default: Date.now
            }
        }
    ],
    name: {
        type: String,
        required: true
    },
    email: {
        type: String,
        required: true
    },
    comment: {
        type: String,
        required: true
    },
    forWich: {
        type: String,
        required: true
    },
    date: {
        type: Date,
        default: Date.now
    }
});

module.exports = Comment = mongoose.model('comment', CommentSchema);

1. 路由已从“put”更改为“post”，因此我添加了整个对象，而不是连接数字：

路由/api/cmets：

router.post('/like', (req, res) => {
    const { commentId, userId } = req.body;
    Comment.findById(commentId)
    .then(comment => {
        comment.likes.unshift({ commentId, userId });
        comment.save().then(comment => res.json(comment));

    })
    .catch(err => {
        res.status(404).json({ commentnotfound: "No comment found" })
    });
});

1. Redux 操作，我将“handleLike”更改为“addLike”

actions/commentActions.js：

export const addLike = ({ commentId, userId }) => {
    return function(dispatch) {
        const config = {
            headers: {
                'Content-Type': 'application/json'
            }
        }
        const body = JSON.stringify({ commentId, userId });

        axios.post(`/api/comments/like`, body, config)
            .then(res => {
                dispatch(getComments())
            }
        )
    }
};

...如您所见，没有任何类型的有效负载，因此不再需要使用 UPDATE_COMMENTS，因此也不需要减速器。

4. 最后是前端，在页面加载时，我使用 localStorage 将 Id 分配给新客户端。基于该 ID，我正在创建一个新的类似对象：

PostPage.js：

useEffect(() => {
    if (!localStorage.getItem(`userId`)) {
        localStorage.setItem(`userId`, uuidv4())
    }
}, [])

const handleLike = e => {
    e.preventDefault()        
    if(localStorage.getItem(`userId`)) {
        const newLike = {
            commentId: e.target.value,
            userId: localStorage.getItem(`userId`)
        }
        dispatch(addLike(newLike))
    }
}

Answer 2

你需要使用：

Comment.findById()

https://mongoosejs.com/docs/api.html#model_Model.findById

Answer 3

您对客户端的 put 请求需要类似于：

axios.get(`/api/comments/${comment.id}` comment)