更改状态并在数据库中更新

Question

我正在开发一个web应用程序，使用React跟踪水果供应商的库存。js，MongoDB，Node。js和Express。我调用了数据库endpoint来呈现表中的数据。现在，我尝试使用按钮增加和减少库存量，但当我尝试设置新状态时，它不起作用。我尝试通过单击更改状态，然后更新数据库中的新状态。有什么建议吗？

>

可结果成分：

从'react'导入Reac，{Component}；从“react bootstrap”导入*作为react bootstrap；从“axios”导入axios；从“反应引导/按钮”导入按钮；

类可结果扩展组件{

constructor(props) {
  super(props)

  this.state = {
    fruits: []
  }
  this.handleClick = this.handleClick.bind(this)
}


componentDidMount() {
  axios.get('http://localhost:5000/fruits/')
  .then(res => {
    this.setState({
      fruits: res.data
    });
   })
  .catch((error) => {
    console.log(error)
  })



}

handleClick =  () => {
  const fruits = [...this.state.fruits]
  this.setState({fruits: this.state.fruits[1] +1})

  }


render() {

  return(
    <div>
     <h1>Fruit Vendor Stock</h1>
    <ReactBootstrap.Table striped bordered hover size="sm">
  <thead>
    <tr>
      <th>#</th>
      <th>Name</th>
      <th>Stock</th>
      <th>Price</th>
      <th>Add/Reomve</th>
    </tr>
  </thead>
  <tbody> 
    {
      this.state.fruits.map((fruit, index) => (
        <tr>
        <th scope="row">{index + 1}</th>
        <td>{fruit.name}</td>
        <td>{fruit.stock}</td>
        <td>{fruit.price}</td>
        <td>
          <div className="mb2">
          <Button className="btn btn-primary btn-sm"
            onClick={this.handleClick}
          >Add</Button>{' '}
          <Button className="btn btn-danger btn-sm"

          >Remove</Button> 
          </div>
        </td>
        </tr>
        ))
    }
  </tbody>
   </ReactBootstrap.Table>
  </div>
  )
};

}

导出默认结果表；

弗鲁茨达。模型

const mongoose=require（'mongoose'）；

const Schema=mongoose。图式；

const fruits=newschema（{name:{type:String，required:true}，stock:{type:Number，required:true}，price:{type:Number，required:true}，}{

});

常数水果=猫鼬。模型（“果实”，果实）；

单元出口=水果；

-路线：

const router = require('express').Router();
let Fruit = require('../models/fruit_data');

router.route('/').get((req, res) => {
    Fruit.find()
    .then(fruits => res.json(fruits))
    .catch(err => res.status(400).json('Error: ' + err));
});

router.route('/add').post((req, res) => {
    const name = req.body.name;
    const stock = Number(req.body.stock);
    const price = Number(req.body.price);

    const newFruit = new Fruit({
        name,
        stock,
        price,
    });

    newFruit.save()
    .then(() => res.json('Fruit has been added!'))
    .catch(err => res.status(400).json('Error: ' + err));
});

router.route('/:id').get((req, res) => {
    Fruit.findById(req.params.id)
    .then(Fruit => res.json(Fruit))
    .catch(err => res.status(400).json('Error: ' + err));
});

router.route('/:id').delete((req, res) => {
    Fruit.findByIdAndDelete(req.params.id)
    .then(() => res.json('Fruit has deleted.'))
    .catch(err => res.status(400).json("Error: " + err));
});

router.route('/update/:id').put((req, res, next) => {
    Fruit.findByIdAndUpdate(req.params.id, {
        $set: req.body
    }, (error, data) => {
        if(error) {
            return next(error);
            console.log(error)
        } else {
            res.json(data)
            console.log('Stock has been updated')
        }
    })   
    })

单元出口=路由器；

-Server.js：

const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
const mongoose = require('mongoose');

require('dotenv').config();

const app = express();
const port = process.env.PORT || 5000;

app.use(cors());
app.use(express.json());


const uri = process.env.ATLAS_URI;
mongoose.connect(uri, { useNewUrlParser: true });
const connection = mongoose.connection;
connection.once('open', () => {
console.log("MongoDb database connection established successfully!!")

}）

app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

const fruitsRouter = require('./routes/fruit');

app.use('/fruits', fruitsRouter);




app.listen(port, () => {
console.log(`Server is running on port: ${port}`);

}）

-pp.js：

import "./App.css";
import React, { Component, useState, useEffect } from "react";
import FruitTable from "./Components/fruitTable";
import "bootstrap/dist/css/bootstrap.min.css";
import { sendEmail } from "./service/emailService";
import axios from 'axios';

function App() {


  return (
    <div className="App">
     <FruitTable  />
    </div>
   );
  }

导出默认应用程序；

Answer 1

handleClick中的状态更新不正确，它取第1个元素值，加上1，并将其设置为this。状态水果状态值。这打破了水果作为数组的状态不变量。这可能是试图映射您看到的非数组值的“崩溃”。

handleClick =  () => {
  const fruits = [...this.state.fruits]
  this.setState({
    fruits: this.state.fruits[1] +1 // <-- mutates state invariant!!
  })
}

代码也没有传递它试图更新的索引或结果的引用。

根据您的模式，水果项目有3个属性，名称，库存，和价格。对于此解决方案，我将假定名称对于识别目的来说是足够唯一的，并且您正在增加/减少库存数量。

handleClick = (name, addQuantity = 1) => () => {
  this.setState(prevState => ({
    fruits: prevState.fruits.map(fruit => 
      fruit.name === name
      ? { ...fruit, stock: fruit.stock + addQuantity}
      : fruit
    )
  }));
}

现在，您需要在映射时将当前映射的水果项目的name属性传递给处理程序。

{this.state.fruits.map((fruit, index) => (
  <tr key={fruit.name}>
    <th scope="row">{index + 1}</th>
    <td>{fruit.name}</td>
    <td>{fruit.stock}</td>
    <td>{fruit.price}</td>
    <td>
      <div className="mb2">
        <Button
          className="btn btn-primary btn-sm"
          onClick={this.handleClick(item.name, 1)} // <-- add one
        >
          Add
        </Button>{' '}
        <Button
          className="btn btn-danger btn-sm"
          onClick={this.handleClick(item.name, -1)} // remove one
        >
          Remove
        </Button> 
      </div>
    </td>
  </tr>
))}