Question

我正在尝试创建一个基本的订阅组件，用户只需在其中填写电子邮件并订阅服务即可。到目前为止，我无法输入我的数据。试图与Hooks和Typescript一起使用React，只是最后一个妨碍了我：D 我处理输入：

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

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

我有发布功能

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

（要发送“电子邮件”：“ blablabla”）

表格

<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>

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

Answer 1

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

除此之外，还有几件事：

除了定义类型/接口外，通常不将函数类型定义为void（例如postEmail()）-除非有趣，否则就忽略该类型
您可能可以摆脱重复状态之一（loading和submitted）
您在某些语句而不是其他语句上使用分号-保持一致
例如，当您致电.then()时，请使用async / await并尝试/捕获而不是.catch()和postGeneralSub.postGeneralSub(obj).then(...
我不确定您的handleEmail()函数相对于name为何如此动态-如果您知道要设置电子邮件，为什么不直接设置email字段使用[name]
如果可以避免的话，请不要使用any-并且在此代码中您绝对可以避免使用
开始使用像prettier这样的短绒布

使用React Hooks，Typescript和Axios发布请求

1 个答案: