Reactjs 使用React钩子、Typescript和Axios发布请求

我正在尝试创建一个基本的订阅组件，用户只需填写一封电子邮件并订阅一项服务。 到目前为止，我无法输入我的数据。尝试使用React with Hooks和Typescript时，最后一个问题妨碍了我：D 我处理输入：

const handleEmail = (e: React.ChangeEvent<HTMLInputElement>): void => {
        const { name, value } = e.target;
        

        setData({...data, [name]: value})
    }

consthandleemail=（e:React.ChangeEvent）：void=>{
常量{name，value}=e.target；
setData（{…数据，[名称]：值}）
}

我有post功能

const postEmail = (e: React.ChangeEvent<HTMLInputElement>): void => {
        e.preventDefault()

        let obj = {
            email: data.email
        };
        setLoading(true)
        setSubmitted(false);
        postGeneralSub.postGeneralSub(obj).then(response => {
            setData({
                email: response.data.email
            })
            setLoading(false)
            setSubmitted(true);
            console.log(response.data);

        }).catch(e => {
            console.log(e);
        });

constpostmail=（e:React.changevent）：void=>{
e、 预防默认值（）
设obj={
电子邮件：data.email
};
设置加载（真）
setSubmitted（假）；
postGeneralSub.postGeneralSub（obj）。然后（响应=>{
设置数据({
电子邮件：response.data.email
})
设置加载（错误）
setSubmitted（true）；
console.log（response.data）；
}).catch（e=>{
控制台日志（e）；
});

（e要发送“电子邮件”：“布拉布拉布拉”）

形式呢

<div>
            <GeneralCountryForm
            label="Insert Email"
            onChange={handleEmail}
            value={data.email}
            submit={postEmail}
            />
            <Button>Submit data</Button>
        </div>

提交数据

使用子组件GeneralCountryForm：

type GeneralSubProps = {
    label: string;
    onChange: any;
    value: string;
    submit: any
  }
export const GeneralCountryForm: FunctionComponent<GeneralSubProps> = ({ label, onChange, value, submit }) => 
    <form onSubmit={submit}>
      <label>{label}</label>
      <input type="text" value={value} onChange={onChange} />
    </form>

type GeneralSubProps={
标签：字符串；
onChange：任何；
值：字符串；
提交：任何
}
导出常量GeneralCountryForm:FunctionComponent=（{label，onChange，value，submit}）=>
{label}

---

关于我做错了什么以及如何改进这种逻辑/错误处理的任何提示？

好吧，按钮似乎根本没有连接到表单，因此表单无法提交，单击按钮时没有处理程序。我要么将提交处理程序移到按钮上，用useRef获取输入值，要么移动将按钮插入表单中

除此之外，还有几件事：

将函数类型定义为void（如

postmail（）

is）是不常见的，除非定义类型/接口，否则只需忽略该类型，除非它有趣

您可能可以消除其中一种重复状态（

加载

和

提交

）

在某些语句上使用分号，而在其他语句上不使用分号-请保持一致

使用async/wait和try/catch代替

.then（）

和

.catch（）

，例如，当您调用

postGeneralSub.postGeneralSub（obj）时。然后（…

我不知道为什么你的

handleEmail（）

函数在

名称

方面如此动态-如果你知道你正在设置电子邮件，为什么不直接设置

电子邮件

字段而不是使用

[name]

如果可以避免，请不要使用

any

——在本代码中您绝对可以避免它

开始使用一个像这样的短绒