Блог

Я впервые реагирую и пытаюсь отправлять данные с клиента на сервер объект за объектом, на самом деле у меня есть генератор форм, который при нажатии кнопки «Плюс» создает новую форму, и мне нужно, чтобы при нажатии кнопки «Плюс» также отправлялись данные на сервер. Я использую redux и Axios. Это мой код компонента:

 function RequestForm(props) {  const [inputList, setInputList] = useState([  {  machineName: '',  brand: '',  serialNumber: '',  model: '',  visualStatus: '',  belongings: '',  primitiveDefect: '',  transmissionWay: '',  opportunityId: '',  engError: '',  perError: '',  },  ]);  const { loading } = props;  // handle input change  const handleInputChange = (e, index) =gt; {  const { name, value } = e.target;  const list = [...inputList];  list[index][name] = value;  setInputList(list);  };  // Send Data to server  const onSubmit = e =gt; {  e.preventDefault();  const {  machineName,  model,  brand,  serialNumber,  visualStatus,  belongings,  primitiveDefect,  transmissionWay,  opportunityId,  } = inputList;  const service = {  machineName,  model,  brand,  serialNumber,  visualStatus,  belongings,  primitiveDefect,  transmissionWay,  opportunityId,  };  props.request(service);  };   // handle click event of the Remove button  const handleRemoveClick = index =gt; {  const list = [...inputList];  list.splice(index, 1);  setInputList(list);  };   // handle click event of the Add button  const handleAddClick = () =gt; {  setInputList([  ...inputList,  {  machineName: '',  brand: '',  serialNumber: '',  model: '',  visualStatus: '',  belongings: '',  primitiveDefect: '',  transmissionWay: '',  opportunityId: props.user.opportunityId,  engError: '',  perError: '',  },  ]);  };   return (  lt;gt;  lt;Containergt;  lt;divgt;  lt;div className={'row request-whole-box'}gt;  lt;div className="col-lg-6 col-12 "gt;  lt;img alt={'g-request'} src={RequestImg} className={'request-img'} /gt;  lt;/divgt;  lt;div className="col-lg-6 col-12 mt-5"gt;  {inputList.map((x, i) =gt; {  return (  lt;div className="row justify-content-center"gt;  lt;form className="request-service-form-wrapper" onSubmit={onSubmit}gt;  lt;Rowgt;  lt;div className="col-lg-6 col-12"gt;  lt;input  placeholder={''}  name={'brand'}  value={x.brand}  onChange={e =gt; handleInputChange(e, i)}  autoComplete={'on'}  onBlur={e =gt; (e.target.placeholder = '')}  onFocus={e =gt; (e.target.placeholder = '')}  /gt;  {/*lt;div className="invalid-feedback d-block"gt;*/}  {/* {inputs.error}*/}  {/*lt;/divgt;*/}  lt;/divgt;  lt;div className="col-lg-6 col-12"gt;  lt;input  placeholder={''}  name={'machineName'}  value={x.machineName}  onChange={e =gt; handleInputChange(e, i)}  autoComplete={'on'}  onBlur={e =gt; (e.target.placeholder = '')}  onFocus={e =gt; (e.target.placeholder = '')}  /gt;  lt;/divgt;  lt;/Rowgt;  lt;Rowgt;  lt;div className="col-lg-6 col-12"gt;  lt;input  placeholder={''}  name={'serialNumber'}  value={x.serialNumber}  onChange={e =gt; handleInputChange(e, i)}  autoComplete={'on'}  onBlur={e =gt; (e.target.placeholder = '')}  onFocus={e =gt; (e.target.placeholder = '')}  /gt;  lt;/divgt;  lt;div className="col-lg-6 col-12"gt;  lt;input  placeholder={''}  name={'model'}  value={x.model}  onChange={e =gt; handleInputChange(e, i)}  autoComplete={'on'}  onBlur={e =gt; (e.target.placeholder = '')}  onFocus={e =gt; (e.target.placeholder = '')}  /gt;  lt;/divgt;  lt;/Rowgt;  lt;Rowgt;  lt;div className="col-lg-6 col-12"gt;  lt;input  placeholder={''}  name={'transmissionWay'}  value={x.transmissionWay}  onChange={e =gt; handleInputChange(e, i)}  autoComplete={'on'}  onBlur={e =gt; (e.target.placeholder = '')}  onFocus={e =gt; (e.target.placeholder = '')}  /gt;  lt;/divgt;  lt;div className="col-lg-6 col-12"gt;  lt;input  placeholder={''}  name={'primitiveDefect'}  value={x.primitiveDefect}  onChange={e =gt; handleInputChange(e, i)}  autoComplete={'on'}  onBlur={e =gt; (e.target.placeholder = '')}  onFocus={e =gt; (e.target.placeholder = '')}  /gt;  lt;/divgt;  lt;/Rowgt;  lt;Rowgt;  lt;div className="col-lg-6 col-12"gt;  lt;input  placeholder={''}  name={'belongings'}  value={x.belongings}  onChange={e =gt; handleInputChange(e, i)}  autoComplete={'on'}  onBlur={e =gt; (e.target.placeholder = '')}  onFocus={e =gt; (e.target.placeholder = '')}  /gt;  lt;/divgt;  lt;div className="col-lg-6 col-12"gt;  lt;input  placeholder={''}  name={'visualStatus'}  value={x.visualStatus}  onChange={e =gt; handleInputChange(e, i)}  autoComplete={'on'}  onBlur={e =gt; (e.target.placeholder = '')}  onFocus={e =gt; (e.target.placeholder = '')}  /gt;  lt;/divgt;  lt;/Rowgt;   lt;div className="btn-box"gt;  {inputList.length !== 1 amp;amp; (  lt;button className="mr10" onClick={() =gt; handleRemoveClick(i)}gt;  Remove  lt;/buttongt;  )}  {inputList.length - 1 === i amp;amp; (  lt;button  className={' add-forms-button'}  type={'submit'}  onSubmit={onSubmit}  onClick={handleAddClick}  gt;  lt;AiOutlinePlus /gt;  lt;/buttongt;  )}  lt;/divgt;  lt;/formgt;  lt;/divgt;  );  })}  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/Containergt;  lt;Footer /gt;  lt;/gt;  ); }  const mapStateToProps = state =gt; ({  isAuthenticated: state.isAuthenticated,  error: state.error,  user: state.auth, });  export default withRouter(connect(mapStateToProps, { request })(RequestForm));  

И это мой код действия :

 export const request = ({  machineName,  brand,  model,  serialNumber,  visualStatus,  belongings,  primitiveDefect,  transmissionWay,  opportunityId, }) =gt; (dispatch, getState) =gt; {  dispatch({ type: 'REQUEST_LOADING' });  const token = getState().auth.token;  const config = {  headers: {  'Content-Type': 'application/json',  Authorization: `${token}`,  Accept: 'application/json',  },  };  const body = JSON.stringify({  machineName,  brand,  model,  serialNumber,  visualStatus,  belongings,  primitiveDefect,  transmissionWay,  opportunityId,  });  axios  .post('Url', body, config)  .then(res =gt;  dispatch({  type: REQUEST_SUCCESS,  payload: res.data,  })  )  .then(() =gt; {  toast.success('Success', {  position: toast.POSITION.TOP_RIGHT,  autoClose: 2000,  hideProgressBar: true,  });  })  .catch(err =gt; {  dispatch(returnError(err.response.data, err.response.status, 'REQUEST_FAIL'));  dispatch({  type: REQUEST_FAIL,  });  }); };  

Мне нужно, чтобы при нажатии на кнопку «Плюс» данные отправлялись на сервер и создавалась новая форма, но теперь при нажатии на нее ничего не работает, и я не знаю, как отправлять данные объект за объектом.