Не могу редактировать и обновлять свойства с формой Reactjs и MongoDB

Question

Поэтому я использую Nodejs, MongoDB и Reactjs и пытаюсь редактировать свойства проектов.У меня есть несколько проектов, и когда я хочу изменить свойства одного, я не могу это сделать.Мы можем получить доступ к свойствам внутри входных данных, мы можем видеть заголовок и тип, но даже не можем удалить, написать, он имеет доступ к свойствам по его идентификатору, но тогда я не могу изменить его, я думаю, у меня здесь несколько проблем, чем.

Я напишу здесь свой серверный код, мою страницу проекта Edit / Update и gif с примером, когда скажу, что я ничего не могу изменить на входах.

Код моего сервера:

//Render Edit Project Page byId 
app.get('/dashboard/project/:id/edit', function(req, res){
 let id = req.params.id;

Project.findById(id).exec((err, project) => {
    if (err) {
        console.log(err);
    }
    res.json(project);
});
}


//Update Projects Properties byId
app.put('/dashboard/project/:id/edit', function(req, res){
 var id = req.params.id;

 var project = {
   title: req.body.title,
   typeOfProduction: req.body.typeOfProduction
 };

 Project.findByIdAndUpdate(id, project, {new: true}, 
 function(err){
   if(err){
       console.log(err);
   }
   res.json(project);
  })
}; 

Страница проекта редактирования моего компонента React

import React, { Component } from 'react';
import { NavLink } from 'react-router-dom';

import './EditProject.css';


class EditProject extends Component {
    constructor(props){
    super(props);
    this.state = {
      //project: {}
        title: '',
        typeOfProduction: ''
    };
}

inputChangedHandler = (event) => {
    const updatedProject = event.target.value;
}

componentDidMount() { 
// console.log("PROPS " + JSON.stringify(this.props));
    const { match: { params } } = this.props;

    fetch(`/dashboard/project/${params.id}/edit`)
    .then(response => {  return response.json()
    }).then(project => {
        console.log(JSON.stringify(project));
        this.setState({
            //project: project
            title: project.title,
            typeOfProduction: project.typeOfProduction
        })

    })
}

render() {

    return (
        <div className="EditProject"> EDIT
        <form method="POST" action="/dashboard/project/${params.id}/edit?_method=PUT">
            <div className="form-group container">
                <label className="form--title">Title</label>
                <input type="text" className="form-control " value={this.state.title} name="title" ref="title" onChange={(event)=>this.inputChangedHandler(event)}/>
            </div>
            <div className="form-group container">
                <label className="form--title">Type of Production</label>
                <input type="text" className="form-control " value={this.state.typeOfProduction} name="typeOfProduction" ref="typeOfProduction"  onChange={(event)=>this.inputChangedHandler(event)}/>
            </div>
            <div className="form-group container button">
                <button type="submit" className="btn btn-default" value="Submit" onClcik={() => onsubmit(form)}>Update</button>
            </div>
        </form>
        </div>
    );
    }
}
export default EditProject;

Имеющиеся у меня ошибки :

1- Предупреждение об устаревании: collection.findAndModify устарело.Вместо этого используйте findOneAndUpdate, findOneAndReplace или findOneAndDelete.

2- Входные данные не могут измениться

3- При нажатии кнопки «Обновить»:

Answer 1

Я думаю, ваше обновление перекрывает весь объект, потому что вы забыли оператор $ set.Это оператор, который изменяет только атрибуты объекта, а не заменяет весь объект!

Пример:

Model.update(query, { $set: { name: 'jason bourne' }}, options, callback)

Answer 2

Прежде всего, что касается предупреждения об устаревании, вам нужно изменить метод findAndModify (поскольку я не вижу его здесь, я предполагаю, что вы используете его в другом месте, или, возможно, один из методов, который вы используете, вызывает его)один из предложенных способов и измените свой код соответствующим образом.

---

Затем вам нужно узнать о React и контролируемых компонентах: https://reactjs.org/docs/forms.html

Вам необходимо установить состояние компонента в своемОбработчик onChange, например:

this.setState({
    title: event.target.value // or typeOfProduction, depending on wich element fired the event
});

Это называется управляемым компонентом в React.

---

Что касается тела ответа, получаемого при нажатии на кнопку «Обновить», то это действительно то, что выспросил:

res.json(project);

возвращает переменную проекта в виде файла JSON, который отображается на снимке экрана.

См. этот вопрос для получения дополнительной информации о нем: Правильный способ возвратаJSON с использованием узла или Express