javascript - 通过 onclick 按钮更改数据库数据

问题描述

我不确定如何通过反应更改/更新数据库中的数据。

我的数据库：

const Package = new mongoose.Schema({
  packageID =  {type: String},
  packageStatus = {type: String, enum: [packed, delivered, received], default: 'packed' },
})

如何在 react/class 组件中引用 packageStatus 及其枚举值？我该怎么称呼他们？
默认值为“packed”，我想在单击按钮时将其更改为“delivered”（不涉及文本字段）。

class PackageStatus extends React.Component {
    constructor(){
        super()
        this.state = {
            packageStatus: 'packed'
        }
        this.updateStatus = this.updateStatus.bind(this);
    }

    updateStatus(){
        this.setState =({
            packageStatus: 'delivered'
        }
        )
    
    render(){

        return (
            <div?
                <button onClick={()=> packageStatus(this)}>Update Status</button>       
            </div>

        )
    }
}

export default PackageStatus

上面的代码改变了显示的文本，但没有改变数据库中的状态，那么如何改变数据库中的数据呢？

接下来，我想根据数据库中的状态显示文本。我不确定如何将isDelivered链接到数据库的状况。

例如

class Status extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isDelivered: true
    };
  }

  render() {
    let { isDelivered } = this.state;
    let status;

    if (isDelivered) {
      status = <h1>Delivered<h1>
    } else {
      status = <h1>Packing in progress<h1>
    }

    return (
      <div>
        {status}
      </div>
    );
  }
}

export default Status;

任何帮助将不胜感激！感谢您的时间

标签： javascriptreactjsmongodbreact-native

解决方案

良好的接口，像REACT这样的前端框架与数据库，更简单的方法是创建apiEndpoints，您将使用 make fetch 或 axios 来生成与这些端点通信的 httpRequests，然后与数据库通信以给您所需的响应。您的问题的解决方法如下：

在节点中使用猫鼬创建模式

   const mongoose = require('mongoose')
   const { Schema } = 猫鼬
   const PackageSchema = new Schema({
       包ID：{
          类型：字符串，
       },
       包状态：{
          类型：字符串，
          枚举：[“已打包”、“已交付”、“已收到”]、
          默认值：'打包'
       }
   })

    module.exports = mongoose.model('package',PackageSchema)

创建 apiEndpoints 或路由以将此模式与 FrontEnd(React) 和 Backend(eg; mongodb) 接口

   常量表达 = 要求（“表达”）；
   常量路由器 = express.Router();
   需要（'dotenv'）.config（）
   const package = require('../model/packageModel');

       router.get('/allpackages', async(req, res) => {
          尝试{
                const getAllPackages = 等待 package.find();
                res.json(getAllPackages);
           }捕捉（错误）{
                 res.json({
                  消息：错误
            })
         }
       })

      router.post('/addPackage',async(req, res) => {
              常量包 = 新包（{
              包ID：req.body.packageID，
              packageStatus：req.body.packageStatus
             })
           尝试{
                const savedPost = await pack.save();
                res.json(savedPost);
           }捕捉（错误）{
           res.json({
                 消息：错误
           })
          }
       })

    router.patch('/updatePackageStatus', async (req, res) => {
     尝试 {
          常量 updatePackageStatus = 等待 package.updateOne(
           { _id: req.body.packageID },
           {
              $设置：{
                   packageStatus：req.body.packageStatus
             }
          }
        )
        res.json（更新包状态）
       }捕捉（错误）{
       res.json({
         消息：错误
      })
    }
  })

 module.exports = 路由器；

使用POSTMAN 或任何其他选择来测试带有架构和数据库的端点，以查看是否获得所需的结果。在测试完上述内容后，使用POSTMAN，所有需要的操作都按预期工作，你应该没有问题，现在可以将它与任何前端框架（Angular、React、Vue）接口。
```
    获取 http://localhost:3000/package/allpackages
    POST http://localhost:3000/package/addPackage
    补丁 http://localhost:3000/package/updatePackageStatus
 
```

下面显示的示例屏幕截图通过邮递员获取 api 端点

javascript - 通过 onclick 按钮更改数据库数据

问题描述

解决方案

推荐阅读