node.js - 无法使用表单 Reactjs 和 MongoDB 编辑和更新属性

问题描述

所以我正在使用 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- DeprecationWarning：collection.findAndModify 已弃用。请改用 findOneAndUpdate、findOneAndReplace 或 findOneAndDelete。

2-输入不能改变

3- 当点击“更新”按钮时：

标签： node.jsmongodbreactjsformsinput

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

node.js - 无法使用表单 Reactjs 和 MongoDB 编辑和更新属性

问题描述

解决方案

推荐阅读