Question 284052 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – To redirect to the other component I have to click the button twice for it to work

I have an existential question! I don’t understand why when I want to redirect to the other page in my component I have to click the button twice for it to work! the code works fine! It’s just that detail that I have to click the button twice for the redirection to work. I thank you in advance for the help provided :)!

 const navigate = useNavigate();
 const [data, setData] = useState([]);
 const [loading, setLoading] = useState(true);

const getData = async () => {
    try {
      const response = await fetch('http://127.0.0.1:8000/api/filter', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify(formData),
      });

      if (!response.ok) {
        throw new Error('Error');
      }
      const d = await response.json();
      setData(d);

    } catch (error) {
      console.error('Error:', error);
    } finally {
      setLoading(false);
    }
  };


const handleSubmit = (event) => {
    event.preventDefault();
    getData();

    if (!loading) {
      console.log(data);
      navigate('/search', { state: { event: data } });
    }
  };


  <Card className="text-center">
        <Card.Header className='title_search'>Search Event</Card.Header>
            <Card.Body>
              <Form onSubmit={handleSubmit}>
                <Form.Group as={Row} className="mb-3" controlId="formEventName">
                  <Form.Label column sm="2">Name</Form.Label>
                  <Col sm="10"><Form.Control name="name" type="text" placeholder="Name" value={formData.name} onChange={handleInputChange}/></Col>
                </Form.Group>

                <Form.Group as={Row} className="mb-3" controlId="formEventData">
                  <Form.Label column sm="2">Data</Form.Label>
                  <Col sm="10"><Form.Control name="date" type="date" placeholder="10/20/30" value={formData.date} onChange={handleInputChange}/></Col>
                </Form.Group>

                <Form.Group as={Row} className="mb-3" controlId="forEventLocation">
                  <Form.Label column sm="2">Place</Form.Label>
                  <Col sm="10"><Form.Control name="place" type="text" placeholder="Ex: Funchal.." value={formData.place} onChange={handleInputChange}/></Col>
                </Form.Group>
                <Button type="submit" variant="primary" className='search_button'>
                  Search
                </Button>
              </Form> 
            </Card.Body>
    </Card>
Tags:

3

Answers


  1. 0

    Please don’t post images, some of us can’t access those resources cause we are behind a restrictive proxy. It is a recommended practice to attach the code as code-snippet.

    Login or Signup to reply.
  2. 0

    When you call getData(), it initiates an asynchronous operation, and the if (!loading) check immediately after so that it didnt capture the change in the state after the first click so you need to use useEffect and pass state as a dependency and when the dependency value change we check if state is false and if it is false we redirect the user to the other component i hope this work it worked for me .

      useEffect(() => {
    if (!state){     
   navigate('/search', {  state: { event: data } });}
  }, [state]);
    Login or Signup to reply.
  3. 0

    When user clicks on submit button, handleSubmit get’s called which in turn calls getData asynchronously. handleSubmit don’t wait for getData to complete the api call and execution of handleSubmit continues immediately. Now at this point loading is true, So the if condition doesn’t satisfy. Soon api call in getData succeeds and sets loading to false.

    Now when you submit for second time, handleSubmit calls getData and don’t wait for api call to complete and execution of handleSubmit continues. Now because loading is false at this point, the if condition passes and hence it redirects user this time.

    I hope this explanation helps. I don’t know your all use cases, So I won’t comment on a solution.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search