Получение данных о React.js и обновление одних и тех же данных с помощью axios на той же странице с использованием модальной функцииactstrap - PullRequest
Новая
       16

Получение данных о React.js и обновление одних и тех же данных с помощью axios на той же странице с использованием модальной функцииactstrap

0 голосов
/ 15 мая 2019

Я хочу получить данные, отобразить данные на входе, а затем отредактировать эти данные, чтобы я мог затем обновить / поместить их с помощью axios.Я хочу сделать все это на той же странице, поэтому я использую модалы от Reactionstrap.Я продолжаю сталкиваться с различными ошибками, и я не знаю, что делать.Я использую axios для выборки, передавая id и axios.put для обновления

my 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);
}

my 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>
  )}

я ожидалпросмотреть всплывающую форму для изменения данных

...