使用reactstrap模态功能在React.js上获取数据并在同一页面上使用axios更新相同的数据

Question

我想获取数据，在输入中显示数据，然后编辑该数据，以便随后可以使用axios更新/输入。我想在同一页面上完成所有这些操作，因此我正在使用reactstrap中的模式。我不断遇到不同的错误，我不知道该怎么办。我通过提供ID和axios.put更新来使用axios进行获取

我的fetchApi切换我的模式状态并获取我的数据

fetchApi(crtId) {
  this.setState(prevState => ({
    modal: !prevState.modal
  }))
  console.log(crtId);
  let criteriaData = this.state.criterion;
   for (let item in criteriaData) {
     if(criteriaData[item].id === crtId) {
       criteriaData.find(item => item.id === crtId)
     }
   }
   axios.get('http://192.168.1.38:8888/match-module/criteria/'+ crtId)
   .then(result =>{
    this.setState({criterion: criteriaData});
    console.log('Data here');
  })
     .catch(error => console.log(error))

}

我的状态

 this.state = {
      criteria: [],
      tableError: '',
      criterion: [ ],
      modal: false
    }
  this.deleteApi = this.deleteApi.bind(this)
  this.updateApi = this.updateApi.bind(this)
  this.fetchApi = this.fetchApi.bind(this)
  this.toggle = this.toggle.bind(this);
}

我的updateApi

updateApi() {

  const criteriaData = {
    id: string,
    name: string,
    query: string
  }
  axios.put('http://192.168.1.38:8888/match-module/criteria', criteriaData)
  .then(res =>
    console.log(res))
    .catch(err =>
      console.log(err))
}

我通过其传递数据的组件

<CustomTable criterion={criterion} click={this.toggle} toggle={this.toggle} isOpen={modal} criteria={criteria} key={criteria.id} fetch={this.fetchApi} update={this.updateApi} delete={this.deleteApi} />

我要显示数据的功能

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Button , Modal , ModalHeader, ModalBody, ModalFooter, Form, FormGroup, Label, Input, FormText} from 'reactstrap';

const CustomTable = props => {
  return (
     <table className="table table-striped">
     <thead className="thead-dark">
      <tr>
        <th scope="col">ID</th>
        <th scope="col">NAME</th>
        <th scope="col">QUERY</th>
        <th scope="col-2">ACTION</th>
      </tr>
     </thead>
     <tbody>
       {
         props.criteria.map(data => {
      return (
           <tr key={data.id}>
              <td>{data.id}</td>
              <td>{data.name}</td>
              <td>{data.query}</td>
          <td>
          <button color="warning" onClick={e => props.fetch(data.id)}>Edit</button>
          <Modal isOpen={props.isOpen} toggle={props.toggle}>
          <ModalHeader toggle={props.toggle}>Edit Criteria</ModalHeader>
          <ModalBody>
            <Form onSubmit={e => props.update(data)}>
              <FormGroup>
                <Label>ID</Label>
                <Input type="text" value={props.criterion.id}/>
              </FormGroup>
              <FormGroup>
                <Label>NAME</Label>
                <Input type="text" value={props.criterion.name}/>
              </FormGroup>
              <FormGroup>
                <Label>QUERY</Label>
                <Input type="text" value={props.criterion.query}/>
              </FormGroup>
            </Form>
            <Button type="submit">Save</Button>
          </ModalBody>
          </Modal>
            <button  type="submit" className="btn btn-danger" onClick={e => props.delete(data.id)}>Delete</button>
          </td>
           </tr>
         )})
       }
     </tbody>
     </table>
  )}

我希望查看弹出式表格来更改数据