使用npm uuid包反应16表数据更新操作不更新行数据

Z时代
2024-01-10
分类：问答

我面临反应表格表格更新挑战。当我更新一行时，会创建一个新条目。我发现我需要制作唯一的键/ id来跟踪行ID。我建议使用uuid packagehttps://www.npmjs.com/package/uuid。导入此包后，我通过这个uuid()在handlesubmit函数中，仍然无法按预期工作。场景后面缺少或发生了什么？这里是现场演示live demo谢谢。使用npm uuid包反应16表数据更新操作不更新行数据

import React, { Component } from "react"; 
import { 
    Form, 
    FormGroup, 
    //ControlLabel, 
    FormControl, 
    Col, 
    Button, 
    // PageHeader, 
    Row, 
    Grid, 
    Modal, 
    ButtonToolbar, 
    Table 
} from "react-bootstrap"; 
let uuidv4 = require("uuid/v4"); 
//const Dashboard = ({ email }) => (
class Dashboard extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     name: "", 
     description: "", 
     amount: "", 
     date: "", 
     show: false, 
     formdata: [] 
    }; 
    this.handleSubmit = this.handleSubmit.bind(this); 
    this.handleInputChange = this.handleInputChange.bind(this); 
    this.showModal = this.showModal.bind(this); 
    this.hideModal = this.hideModal.bind(this); 
    this.showEditModal = this.showEditModal.bind(this); 
    } 
    showModal() { 
    this.setState({ show: true }); 
    } 
    showEditModal(event, i) { 
    const recordToEdit = this.state.formdata.filter((item, index) => { 
     return index === i; 
    })[0]; 
    this.setState({ 
     show: true, 
     name: recordToEdit.name, 
     description: recordToEdit.description, 
     amount: recordToEdit.amount, 
     date: recordToEdit.date 
    }); 
    } 
    hideModal() { 
    this.setState({ 
     show: false, 
     name: "", 
     description: "", 
     amount: "", 
     date: "" 
    }); 
    } 
    handleInputChange(event) { 
    // update the input that changed 
    this.setState({ 
     [event.target.name]: event.target.value 
    }); 
    } 
    handleSubmit(event) { 
    const formItem = { 
     id: this.state.id, 
     name: this.state.name, 
     description: this.state.description, 
     amount: this.state.amount, 
     date: this.state.date 
    }; 
    if (
     this.state.name === "" || 
     this.state.amount === "" || 
     this.state.date === "" 
    ) { 
     alert("Please fill mandatory filed"); 
    } else { 
     if (
     this.state.formdata.filter(item => item.id === formItem.id).length > 0 
    ) { 
     // update item 
     this.setState(prevState => ({ 
      formdata: prevState.formdata.map(item => { 
      if (item.name === formItem.name) return formItem; 
      else return item; 
      }) 
     })); 
     } else { 
     // add new item 
     this.setState((prevState,id) => ({ 
      formdata: prevState.formdata.concat(formItem) 
     })); 
     } 
     alert("form submited: "); 
     this.setState({ 
     name: "", 
     description: "", 
     amount: "", 
     date: "" 
     }); 
    } 
    event.preventDefault(); 
    } 
    deleteExpense(i) { 
    alert("are you sure you want to Delete this item ?"); 
    this.setState({ 
     formdata: this.state.formdata.filter((item, index) => { 
     return index !== i; 
     }) 
    }); 
    } 
    render() { 
    return (
     <Grid> 
     <p>Welcome</p> 
     <Row> 
      <Col> 
      <ButtonToolbar> 
       <Button bsStyle="primary" onClick={this.showModal}> 
       Add Expenses 
       </Button> 
       <Table striped bordered condensed hover> 
       <thead> 
        <tr> 
        <th>name</th> 
        <th>description</th> 
        <th>amount</th> 
        <th>date</th> 
        <th>Action</th> 
        </tr> 
       </thead> 
       <tbody> 
        {this.state.formdata.map((item, i) => (
        <tr key={i}> 
         <td>{item.name}</td> 
         <td>{item.description}</td> 
         <td>{item.amount}</td> 
         <td>{item.date}</td> 
         <td> 
         <Button 
          bsStyle="warning" 
          onClick={e => this.showEditModal(e, i)} 
         > 
          Update 
         </Button> 
         <Button 
          bsStyle="danger" 
          onClick={() => this.deleteExpense(i)} 
         > 
          Delete 
         </Button> 
         </td> 
         <td /> 
        </tr> 
       ))} 
       </tbody> 
       </Table> 
       <Modal 
       {...this.props} 
       show={this.state.show} 
       onHide={this.hideModal} 
       dialogClassName="custom-modal" 
       > 
       <Modal.Header closeButton> 
        <Modal.Title 
        id="contained-modal-title-lg " 
        className="text-center" 
        > 
        Add Expenses 
        </Modal.Title> 
       </Modal.Header> 
       <Modal.Body> 
        <Form horizontal onSubmit={this.handleSubmit}> 
        <FormGroup controlId="formHorizontalEmail"> 
         <Col smOffset={4} sm={4}> 
         <FormControl 
          type="Text" 
          placeholder="name" 
          name="name" 
          value={this.state.name} 
          onChange={this.handleInputChange} 
         /> 
         </Col> 
        </FormGroup> 
        <FormGroup controlId="formHorizontalPassword"> 
         <Col smOffset={4} sm={4}> 
         <FormControl 
          type="description" 
          placeholder="description" 
          name="description" 
          value={this.state.description} 
          onChange={this.handleInputChange} 
         /> 
         </Col> 
        </FormGroup> 
        <FormGroup controlId="formHorizontalPassword"> 
         <Col smOffset={4} sm={4}> 
         <FormControl 
          type="amount" 
          placeholder="amount" 
          name="amount" 
          value={this.state.amount} 
          onChange={this.handleInputChange} 
         /> 
         </Col> 
        </FormGroup> 
        <FormGroup controlId="formHorizontalPassword"> 
         <Col smOffset={4} sm={4}> 
         <FormControl 
          type="date" 
          placeholder="date" 
          name="date" 
          value={this.state.date} 
          onChange={this.handleInputChange} 
         /> 
         </Col> 
        </FormGroup> 
        <FormGroup> 
         <Col smOffset={5} sm={4}> 
         <Button type="submit" bsStyle="primary"> 
          Add 
         </Button> 
         </Col> 
        </FormGroup> 
        </Form> 
       </Modal.Body> 
       </Modal> 
      </ButtonToolbar> 
      </Col> 
     </Row> 
     </Grid> 
    ); 
    } 
} 
export default Dashboard;