在实践中反应:用钩子改善形式

使用表格

一个常见的情况是处理表格的逻辑,可以为自定义钩提取

// form.tsximport { formeventhandler, usestate } from "react";function forms() {  const [title, settitle] = usestate("");  const [price, setprice] = usestate("");  const [description, setdescription] = usestate("");  const [image, setimage] = usestate("");  const [category, setcategory] = usestate("");  const [data, setdata] = usestate(null);  const [isloading, setisloading] = usestate(false);  const [error, seterror] = usestate(null);  const handlesubmit: formeventhandler = async (e) => {    try {      setisloading(true);      e.preventdefault();      const response = await fetch("https://fakestoreapi.com/products", {        method: "post",        body: json.stringify({          title,          price,          description,          image,          category,        }),      });      const data = await response.json();      setdata(data);    } catch (e) {      seterror(e);    } finally {      setisloading(false);    }  };  return (                 settitle(value)}      />             setprice(value)}      />