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

【问题标题】：How to use useeffect behavior on button click如何在按钮单击时使用 useEffect 行为
【发布时间】：2020-07-29 14:59:30
【问题描述】：

所以，基本上我有一个接收电话号码的表单，当单击按钮时，它会显示来自 api 的数据，该 API 接收电话号码作为过滤数据的参数。同时，我希望当单击按钮时，它会将用户带到另一个动态链接，其中包含从 api 获取的代码，例如“user/001”。问题是，当我单击按钮时，我得到了 api 数据，但链接中的代码未定义“用户/未定义”我认为这可能是因为链接在 api 获取之前出现，但我不知道如何我可以处理这种情况吗？此外，经过一些认真的调试后，我意识到状态中没有存储任何内容，当我使用 useEffect 而不是函数 handleClick 时，我能够看到状态中的数据，但使用 handleClick 则相反。是否可以创建类似的 useEffect 行为来处理按钮事件？

......


  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;

【问题讨论】：

您的response.data[0] 是否以.data 格式返回您的数据？如果它是您直接寻找的值，那么您将数据设置为状态变量state（您应该考虑重命名此 IMO——可能类似于phoneNumber），然后在<Link> 中，您'重新引用state.value。您可能只需要引用state 本身，例如/person/${state}。

标签： javascript reactjs

【解决方案1】：

问题是<Link> 的to 属性在重定向之前没有等待fetch 结束。

您应该使用路由器中的push 方法。

假设你使用的是 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>
  );

【讨论】：