如何在按钮单击时使用 useEffect 行为

Question

So, basically I have a form that receives a phone number and when clicking the button it displays data from api that receives the phone number as a parameter to filter the data. At the same time I want that when clicking the button it takes the user to another dinamic link containing their code taken from the api, sth like 'user/001'. The thing is when i click the button i get the api data but the code in the link is undefined 'user/undefined' I think it can be for the fact that the link shows up before the api fetch itself but I do not know how can i deal with this situation. Also, after some serious debugging i realized that nothing is being stored in the state, when I use useEffect instead of the function handleClick im able to see the data in the state but with handleClick is the opposite. Is it possible to create similar useEffect behavior to handle button event?

......

  const [state, setState] = useState({});

  let headers = new Headers();
  headers.set("Authorization", "Basic " + btoa(username + ":" + password));

  const handleClick=() => {
    getData();
  };

  const getData = async () => {
    const a = await fetch(url, { method: "GET", headers: headers });
    const response = await a.json();
    setState(response.data[0]);
    console.log(response);
  };

  return (
    <div>
        <div>
          <p>{test.place}</p>
           <Link to={{pathname: `/person/${state.value}` }}> 
            <Button
              variant="contained"
              color="primary"
              className={cx(styles.button)}
              onClick={handleClick}
            >
              Entrar
            </Button> 
            </Link>
        </div>
    
    </div>
  );
};

export default FetchApi;

Answer 1

The problem is that the to props of the <Link> does not wait for the fetch to end before redirecting.

You should use the push method from the router.

Assuming you are using React Router:

  const history = useHistory();

  const handleClick=() => {
    getData();
  };

  const getData = async () => {
    const response = await fetch(url, { method: "GET", headers: headers });
    const { data } = await response.json();

    setState(data[0]);
    
    history.push(`/person/${data[0].value}`)
  };

  return (
    <div>
        <div>
          <p>{test.place}</p>
            <Button variant="contained" color="primary" className={cx(styles.button)} onClick= {handleClick} >
              Entrar
            </Button>
        </div>
    </div>
  );