在提交函数中使用useAsync钩子的思路

Question

我已经导入了useAsync(钩子来自‘react异步’)，在客户端提交表单发送post请求之后，我尝试使用它。

现在，我得到了一个错误，不能根据钩子的规则在函数中使用钩子。

怎么能解决呢？这样，在客户机提交表单之后，我就能够使用useAsync了。handleSubmit是我的onSubmit函数。

这是我的密码：

import { Modal } from 'react-bootstrap';
import "react-datepicker/dist/react-datepicker.css";
import DatePicker from 'react-datepicker'
import { useState } from 'react';
import { useAsync } from 'react-async';
import useFetch from '../../hooks/useFetch'
import { useLocation } from 'react-router-dom';

const TodoPopup = (props : {show : boolean, onHide : () => void, title : string, values? 
: {title : string, expirationDate : any, description : string}}) => {

const [name, setName] = useState(props.values?.title || '');
const [date, setDate] = useState(props.values?.expirationDate || '');
const [description, setDescription] = useState(props.values?.description || '');

const url = useLocation().pathname;

const handleSubmit = (e : React.FormEvent<HTMLFormElement>) => {
  e.preventDefault();
  
  // const fetchRelevant = useFetch.apply(this, 
  //   (props.values? [url, 'PUT', {name, date, description}] : [url, 'POST',{name,date, description}]));

    const fetchRelevant = useFetch.apply(this, [url, props.values? 'PUT' : 'POST', 
  {name, date, description}]);

  const { data, error, isPending} = useAsync({promiseFn : () => {
    return fetchRelevant;
  }})

  if(isPending) console.log('loading...');
  if(error) console.log('error');
  if(data)  props.onHide();
}
return (
    <Modal {...props} centered>
  <Modal.Header closeButton>
    <Modal.Title>{props.title}</Modal.Title>
  </Modal.Header>
  <form onSubmit={(e) => handleSubmit(e)}>
  <Modal.Body>
    <div className = "form-group">
        <label>Task Name</label>
        <input type="text" className = "form-control" value = {name} onChange = {(e) => 
     setName(e.target.value)} required />
    </div>
    <div className = "form-group">
        <label>Expired</label>
        <DatePicker selected={date} onChange={e => setDate(e)} className="form-control" 
    minDate={new Date()} required />
    </div>
    <div className = "form-group">
        <label>Description</label>
        <textarea rows = {5} className = "form-control" value = {description} onChange = 
     {(e) => setDescription(e.target.value)}></textarea>
    </div>
  </Modal.Body>
  <Modal.Footer>
    <button className="btn btn-primary" type="submit">Save changes</button>
  </Modal.Footer>
  </form>
</Modal>
);
};

export default TodoPopup;

*注意-我尝试用大写字母命名onSubmit函数，但它导致了运行时错误。

Answer 1

useFetch公开了一个名为run的函数，您可以这样调用它：

import React, { useState } from "react"
import { useFetch } from "react-async"

const TodoPopup  = (props) => {

    const { isPending, error, run } = useFetch("URL", { method: "POST" })
    const [name, setName] = useState(props.values?.title || '');
    const [date, setDate] = useState(props.values?.expirationDate || '');
    const [description, setDescription] = useState(props.values?.description || '');

    const handleSubmit = e => {
      e.preventDefault()
      run({ body: JSON.stringify({name, date, description}) })
   }

   return (
     <form onSubmit={handleSubmit}>
      ...
     </form>
  )
}

export default TodoPopup;