无法使用表单 Reactjs 和 MongoDB 编辑和更新属性答案

【问题标题】：Can't Edit and Update properties with form Reactjs and MongoDB无法使用表单 Reactjs 和 MongoDB 编辑和更新属性
【发布时间】：2018-09-25 11:33:54
【问题描述】：

所以我正在使用 Nodejs、MongoDB 和 Reactjs 我正在尝试编辑项目的属性。我有多个项目，当我想编辑一个项目的属性时，我做不到。我们可以访问输入中的属性，我们可以看到 Title 和 Type 但甚至无法删除、写入，他通过其 ID 访问属性但我无法更改它，我想我这里有多个问题。

我将在这里写下我的服务器代码、我的编辑/更新项目页面和一个带有示例的 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- 当点击“更新”按钮时：

【问题讨论】：

标签： node.js mongodb reactjs forms input

【解决方案1】：

我认为您的更新会覆盖整个对象，因为您忘记了 $set 运算符。这是只改变对象的属性而不是替换整个对象的操作符！

例子：

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

【讨论】：

【解决方案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 文件返回，该文件会显示在您的屏幕截图中。

有关更多信息，请参阅此问题：Proper way to return JSON using node or Express

【讨论】：

【解决方案3】：

尝试将输入标签中的“值”替换为“占位符”

【讨论】：