Question

我有一个表单组件，其中使用钩子从所有输入中获取数据并将其发送到使用axios.post提交的表单服务器中

我想做的是当axios请求完成时，我想抓住errors属性并将其传递给另一个组件Alert作为显示的道具。

问题是我不知道该怎么做。现在，如果我在console.log组件中进行Alert道具，则输入和表单提交中的每个值更改都会得到errors: []，根本不会触发。（并且response.data.errors不为空，如果我在axios帖子中console.log(response.data.errors)看到了数据从服务器返回）

我只是学习钩子，所以我不确定在这种情况下该怎么做。

export const SignupForm = () => {
    let name:any = handleUserInput('');
    let email:any = handleUserInput('');
    let password:any = handleUserInput('');
    let errors:any = [];

    function registerUser(event: React.FormEvent<HTMLFormElement>): void {

        event.preventDefault();
        const registerInfo = Object.assign({}, {
            email: email.value, 
            password: password.value, 
            name: name. value
        });

        axios.post('/register', registerInfo)
            .then(response => errors = response.data.errors)
            .catch(error => console.log(error))
    }

    function handleUserInput(initialValue: string): object {
        const [value, setValue] = useState(initialValue);

        function handleChange(event: Event): void {
            let element = event.target as HTMLInputElement;
            setValue(element.value);
        }

        return {
            value,
            onChange: handleChange
        }
    }

    return (
        <div>
            <Alert errors={errors} />

            <div className="form-holder">
                <form action="POST" className="form" onSubmit={(e) => registerUser(e)}>
                    <label htmlFor="Email">Email</label>
                    <input type="text" id="email" className="form__input" {...email} required />
                    <label htmlFor="password">Password</label>
                    <input type="password" id="password" className="form__input" {...password} required />
                    <label htmlFor="name">Name</label>
                    <input type="text" id="name" className="form__input" {...name} required />
                    <button type="submit" className="form__button">Signup</button>
                </form>
            </div>
        </div>
    );
}

警报组件

interface alertProps {
    errors?: []
}

export const Alert = (props: alertProps) => {
    console.log(props)
    return(
        <div></div>
    )
}

使用钩子在React中显示来自axios发布请求的数据？

0 个答案: