внутренний код не работает с pu sh id для массива свойств друзей

Question

При нажатии кнопки «Следить за пользователем» (в компоненте Frienddetail) вызывается функция addPeopleFollow. С помощью этой функции я хочу сохранить идентификатор пользователя, которого щелкнули (того, за которым вы пытаетесь следовать) в свойстве Friends Array пользователя, который вошел в мою базу данных / щелкнул мышью.

В моей базе данных есть Коллекция пользователей со всеми пользователями для каждого пользователя это:

_id:5eff397b70d78284c8c45186
friends:Array
username:"charlestryingout"
password:"$2b$10$CYMyPx10gk0jO5XoazcrSO32Ng37qoyU6uXkkeaswQ5KWm7k7ooym"
__v:0

Например: если пользователь с id = 5eff397b70d78284c8c45186 нажимает на другого пользователя с id = 5eff397b70d78284c8c45187, то я хотел бы получить это в результате в моей базе данных:

_id:5eff397b70d78284c8c45186
friends:Array[5eff397b70d78284c8c45187]
username:"charlestryingout"
password:"$2b$10$CYMyPx10gk0jO5XoazcrSO32Ng37qoyU6uXkkeaswQ5KWm7k7ooym"
__v:0

Я закодировал содержимое функции addPeopleFollow (ax ios request) и мне удалось заставить ее работать (я вижу console.logs в. затем в моей консоли ). Не стесняйтесь предлагать изменения, если считаете, что он неполный.

Мой вопрос: Может ли кто-нибудь помочь мне в написании бэкэнда (первая версия ниже)?

Не могли бы вы написать полный код (подумайте только о бэкэнд, но не стесняйтесь предлагать изменения и во внешнем интерфейсе. Я использую Node / Mongoose / MongoDB / React

Внешний интерфейс

addPeopleFollow(idpeopleyoufollow){
    Axios({
        method: "POST",
        url: `${process.env.REACT_APP_API_BASE}/friends`,
        data: qs.stringify(idpeopleyoufollow),
        headers: {"content-type": "application/x-www-form-urlencoded"},
        withCredentials: true
    })
    .then(() => {
        console.log("charles")
        console.log(idpeopleyoufollow)
        console.log("charles")
    })
    .catch((error) => {
        console.log(error.response)
    })
}

render() {
    return (
        <DefaultLayout>
        <div className="friendsoverviewcontainer">
            <h1>Our community ({this.state.friends.length} registered users)</h1>
            <form className="friends">               
                <div className="titlepart">
                    <label className="friendlabel" htmlFor="friend">Search for Users :</label><br></br>
                    <input className="friendform" type="text" name="friend" value={this.state.friend} placeholder="Type a username here!" onChange={this.searchFriends}></input>
                </div>
            </form>

            <div className="friendsboxes" >
                {
                    this.state.searchFriends.map(friend =>
                        <div key={friend._id}>
                            <Frienddetail 
                                key={friend._id}
                                id={friend._id}
                                username={friend.username}
                                location={friend.location}
                                innerCircle={this.addToInnerCircle}
                                peopleFollow={this.addPeopleFollow}
                            />
                        </div>
                    )   
                }
            </div>
        </div>

Компонент Frienddetail

import React from 'react'
import './Frienddetail.css'

class Frienddetail extends React.Component {
    constructor() {
        super()

        this.state = {
            
        }
    }

    render() {
        return (
                <div className="friendbox">
                    <img className="imagedaredevilspicdetail" src="/images/profileimage.png" alt="picturesetting" />
                    <p className="friend">{this.props.username}</p>
                    <p className="friend">{this.props.location}</p>
                    <button className="followbutton" onClick={(e) => this.props.peopleFollow(this.props.id)}>Follow user!</button>
                    <button className="friendbutton" onClick={(e)=> this.props.innerCircle(this.props.id)}>Add to inner circle!</button>
                </div>
        )
    }
}

export default Frienddetail

Бэкэнд

// add peopleYouFollow
router.post("/friends", (req,res) => {
  console.log("thisishappening")
  let iduser = getUser()._id 
  console.log(iduser)
  User
  .findByIdAndUpdate({_id:iduser},{$push:{friends:req.body._id}})
  .then((response) => {
    res.json(response)
    console.log("thisishappening")
  })
  .catch(error => {
    res.json(error)
  })
})

Модель пользователя

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

const userSchema = new Schema({
    username: String,
    password: String,
    location: String,
    imageUrl: String,
    friends: [mongoose.Schema.Types.ObjectId],
    error: String
})

const User = mongoose.model("users",userSchema)

module.exports = User;

Answer 1

есть некоторые критические изменения, которые я бы сделал, если бы я собирался реализовать следующий маршрут, это всего лишь мое мнение, поэтому я предполагаю, что у вас есть body-parser. поэтому в своем интерфейсе вы должны отправить запрос POST формы на сервер / бэкэнд / следовать ему с информацией в JSON, например {following: 1242424}

, плюс я не уверен в вашем 'getUser (). id '

Я бы сделал что-то вроде этого.

Backend

// add peopleYouFollow
router.post("/follow/:id", async (req,res, next) => {
try{
  {following} = req.body;
let user = await User.findById(req.params.id);

if (!user) {
    return next(err);
}
  const updatedUser = await User.findByIdAndUpdate(req.params.id,{$push:{friends:following}}, {new:true, runValidators:true})

res.json({success:true,data:updatedUser})

}catch(err){
//handle error
next(err)
}
  
})

СОВЕТ: -> используйте AsyncHandler // погуглите -> используйте async / await для более чистого кода ... обещания хороши, но могут быть немного сложнее -> удалить пароль для MongoDB, выбранный по соображениям безопасности -> эффективно обрабатывать ошибки