Question

所以我正在使用Nodejs，MongoDB和Reactjs 并且我正在尝试编辑项目的属性。我有多个项目，当我要编辑一个项目的属性时，我做不到。我们可以访问输入中的属性，可以看到“标题”和“类型”，但是甚至不能删除，写入，他可以通过其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 Component编辑项目页面

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- DeprecationWarning：不推荐使用collection.findAndModify。改用findOneAndUpdate，findOneAndReplace或findOneAndDelete。

2-输入不能更改

3-单击“更新”按钮时：

Answer 1

首先，关于弃用警告，您需要更改方法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

Answer 2

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

示例：

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

Answer 3

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

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

3 个答案: