Question

我正在useEffect内编写一个函数，并以形式调用该函数，但它表示已定义函数但从未使用过

我正在使用useEffect，因此无论何时更新电子邮件，都应该更新并重新呈现组件现在，该组件无法通过单击按钮重新渲染

gcc -S

    const [email, setEmail] = useState("")


    const handleEmailInput = (e) => {
        console.log("Entering email");
        setEmail(e.target.value);
    }

    const [validated, setValidated] = useState(false);

    useEffect(() => {
        const handleSubmit = (event) => {
            const form = event.currentTarget;
            if (form.checkValidity() === false) {
            setEmail("")  
            event.stopPropagation();
            event.preventDefault();
            } else{
            setModalShow(true)
            event.stopPropagation();
            event.preventDefault();
            }
            setValidated(true);
        };
      }, [email]);

Answer 1

由于没有在useEffect内调用该函数，因此出现了该错误-

useEffect(() => {
    const handleSubmit = (event) => {
        const form = event.currentTarget;
        if (form.checkValidity() === false) {
        setEmail("")  
        event.stopPropagation();
        event.preventDefault();
        } else{
        setModalShow(true)
        event.stopPropagation();
        event.preventDefault();
        }
        setValidated(true);
    };
    handleSubmit(some_value) // need to call this function//
  }, [email]);

现在无论您想做什么，我都认为不行。首先，您要在表单的onSubmit上调用的Submit函数将永远无法工作，因为它的作用域不是全局的。它在useEffect内，范围在useEffect内。我认为您应该做的是删除useEffect，您不需要它。保持组件不变-

 const [email, setEmail] = useState("")

const handleEmailInput = (e) => {
    console.log("Entering email");
    setEmail(e.target.value);
}

const [validated, setValidated] = useState(false);

   const handleSubmit = (event) => {
        const form = event.currentTarget;
        if (form.checkValidity() === false) {
        setEmail("")  
        event.stopPropagation();
        event.preventDefault();
        } else{
        setModalShow(true)
        event.stopPropagation();
        event.preventDefault();
        }
        setValidated(true);
    };


 <Form noValidate validated={validated} onSubmit={handleSubmit}>
                        <Form.Group controlId="validationCustomUsername">
                            <InputGroup>
                                <InputGroup.Prepend>
                                    <InputGroup.Text id="inputGroupPrepend">@</InputGroup.Text>
                                </InputGroup.Prepend>
                                <Form.Control
                                    type="email"
                                    pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$"
                                    placeholder="Email"
                                    value = {email}
                                    onChange = {e=>handleEmailInput(e)}
                                    aria-describedby="inputGroupPrepend"
                                    required
                                />
                                <Form.Control.Feedback type="invalid">
                                    Please enter an valid email.
                                </Form.Control.Feedback>
                            </InputGroup>
                        </Form.Group>
                        <Button type="submit" >Subscribe</Button>
                    </Form>

如何使用useEffect更新和呈现组件？

1 个答案: