Как использовать useEffect для обновления и рендеринга компонента?

Question

Я писал функцию внутри useEffect и вызывал эту функцию в форме, но она говорит, что функция определена, но никогда не использовалась.

Я использовал useEffect, чтобы при каждом обновлении электронного письма он обновлял и обновлял компонент заново. теперь компонент не перерисовывается при нажатии кнопки

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

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

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 формы, никогда не будет работать, потому что ее область действия не является глобальной. Он находится внутри 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>