React 16フォームの更新操作でレコードを更新する代わりに新しいレコードを作成

Question

React 16フォームを作成しました。表示レコード、レコードの追加、レコードの削除で完了しました。レコードを更新するときは、代わりに新しいレコードが挿入されています同じレコード値を渡している場合は、何も起こりません。handleSubmitの状態をifの更新項目に、elseの項目を追加するための部分を確認しました。ここで変更する必要がありますか？

import React, { Component } from "react"; 
import { 
    Form, 
    FormGroup, 
    //ControlLabel, 
    FormControl, 
    Col, 
    Button, 
    // PageHeader, 
    // Row, 
    // Grid, 
    Modal, 
    ButtonToolbar, 
    Table 
} from "react-bootstrap"; 

//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 = { 
     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.name === formItem.name).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 => ({ 
      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 (
     <div> 
     <p>Welcome</p> 

     <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> 
     </div> 
    ); 
    } 
} 
export default Dashboard; 

Answer 1

あなたの間違いを見つけられません。このようなあなたの状態をチェックすれば助けになりますか？ formdata.nameにindexOfを実行します。状態に同じ名前の項目がない場合、インデックスは-1になります。

// find item in state with same name 
const index = this.state.formdata.map((item) => { 
    return item.name; 
}).indexOf(formItem.name); 

if (index >= 0) { 
    // update item 
    const formdata = this.state.formdata; 
    formdata[index]= formItem; 
    this.setState({ formdata }); 
} else { 
    // insert new item 
    this.setState(prevState => ({ 
    formdata: prevState.formdata.concat(formItem) 
    })); 
} 

あなたはこのようなあなたの状態を更新し、可能性のあるエラーでチャンスを最小限に抑えるためにprevStateを使用し続けたい場合は別の方法として、：

// update item 
    this.setState(prevState => { 
    const {formdata} = prevState; 
    formdata[index] = formItem; 
    return { formdata } 
    }