单击按钮后，无法编辑数据

Question

我有一个表单，填写详细信息并单击“提交”按钮后，它将重定向到下一页，“我有一个编辑”按钮可以编辑字段。但是“编辑”功能按“例外”方式工作。 有人可以帮我吗？预先感谢

    import React, { Component } from 'react';
    import axios from "axios";
    import {withRouter} from 'react-router';

     class App extends Component {
        constructor(props) {
            super(props)

            this.state = {
                 data:[],
                  objEdit:obj
                       }
                }


    handleInput(e){

        this.setState({
            objEdit:{...this.state.objEdit, [e.target.name] : e.target.value}
        })

    }

    updateUser = () =>{
        console.log(this.state.objEdit)
        const objEdit = {...this.state.objEdit, id: null};
        axios.post("http://localhost:3000/data/", objEdit).then(()=>{
         this.props.history.push('/Form')
             }).catch((error)=>{
            console.log("Error Occured")
        })
    } 
        render() {
            return (
                <div>

                    <div className="col-sm-4">

                        <form>
                        <div className="form-group">
                            <label htmlFor="fname">First Name</label>
                            <input type="text" className="form-control" name="fname" placeholder="Enter First Name" value={this.state.objEdit.fname} onChange={(e)=>{this.handleInput(e)}}/>
                        </div>
                        <div className="form-group">
                            <label htmlFor="lname">Last Name</label>
                            <input type="text" className="form-control" name="lname" placeholder="Enter First Name" value={this.state.objEdit.lname} onChange={(e)=>{this.handleInput(e)}}/>
                        </div>
                        <div className="form-group">
                            <label htmlFor="tel">Tel</label>
                            <input type="text" className="form-control" name="tel" placeholder="Tel" value={this.state.objEdit.tel} onChange={(e)=>{this.handleInput(e)}}/>
                        </div>
                        <div className="form-group">
                            <label htmlFor="address">Address</label>
                            <input type="text" className="form-control" name="address" placeholder="Enter First Name" value={this.state.objEdit.address} onChange={(e)=>{this.handleInput(e)}}/>
                        </div> 
                        <div className="form-group">
                            <label htmlFor="fname">City</label>
                            <input type="text" className="form-control" name="city" placeholder="Enter First Name" value={this.state.objEdit.city} onChange={(e)=>{this.handleInput(e)}}/>
                        </div>
                        <div className="form-group">
                            <label htmlFor="state">State</label>
                            <input type="text" className="form-control" name="state" placeholder="Enter First Name" value={this.state.objEdit.state} onChange={(e)=>{this.handleInput(e)}}/>
                        </div> 
                        <div className="form-group">
                            <label htmlFor="zip">Zip</label>
                            <input type="text" className="form-control" name="zip" placeholder="Enter First Name" value={this.state.objEdit.zip} onChange={(e)=>{this.handleInput(e)}}/>
                        </div>    
                        <button type="button" className="btn btn-primary" onClick={this.updateUser}>Submit</button>
                        </form>

                    </div>

                    </div> 

             )
        }
    }
    export default withRouter(App);

let obj={
    fname:"",
    lname:"",
    tel:"",
    address:"",
    city:"",
    state:"",
    zip:'',
    id:''
}

这里有我的“编辑和删除”功能。我有两个按钮可以进行“编辑”和“删除”。这两个功能不起作用。

import React, { Component } from 'react'
import axios from "axios";
import { Link } from 'react-router-dom';
import App from './App';

 class Form extends Component {

    constructor(props) {
        super(props)

        this.state = {
             data:[],

            }
            }
            componentDidMount(){
                fetch('http://localhost:3000/data')
                .then(response => response.json())
                .then(user => this.setState({data:user}))
            }
            editUser=(obj,index)=>{
                console.log(obj,index)
                this.setState({objEdit:obj})
            }
            deleteUser=(i)=>{
                console.log("deleteUser called",i)
                axios.delete("http://localhost:3000/data/"+this.state.data[i].id).then(res=>{
                    console.log()
                }).catch((error)=>{
                    console.log("Error Occured")
                })
            }

  render() {
    return (
      <div>
         <div className="row">
                    <div className="col-sm-8">
                    <table className="table">
                    <thead>
                        <tr>
                        <th>First Name</th>
                        <th>Last Name</th>
                        <th>Tel</th>
                        <th>Address</th>
                        <th>City</th>
                        <th>State</th>
                        <th>Zip</th>
                        <th>Edit</th>
                        <th>Delete</th>
                        </tr>
                    </thead>

                    <tbody>
                        {this.state.data.map((obj,i)=>{
                            return <tr key={i}>{Object.keys(obj).map((property)=>{
                                return <td key={property}>{obj[property]}</td>

                            })}<td><button onClick={()=>{this.editUser(obj,i)}} className="btn btn-info">Edit</button></td>
                            <td><button onClick={()=>{this.deleteUser(i)}} className="btn btn-danger">Delete</button></td></tr>
                        })}
                    </tbody>
                    <Link to ="/">  <button type="button" className="btn btn-primary" >Back</button></Link> 
                </table>
                </div>
                </div>
      </div>
    )
  }
}

export default Form;