处理搜索点击将路由到Redux上的URL和同时调度功能

Question

handleClick = () => {
    const {providerName,googleAddress,planOption} = this.state;
     let params = {}
    params.providerName = providerName;
    params.address = googleAddress;
    params.planOption = planOption;
    this.props.pcpSearch(params); //redux call disptach

    let pathName = customerId ? `/providers/customers/${customerId}/list/` : `/providers/list/`;
    this.props.history.push({
      pathname: pathName
    });
  };
  
  <Button onClick={this.handleClick}>Search</Button>

我有一个小代码，用于处理搜索点击，同时它将路由以指定URL ans，还将调用redux dispatch。

这里的按钮会单击很多次，但是我只想在第一次单击时呼叫路由？有什么方法可以仅在单击按钮时进行一次呼叫路由，此后便无法导航到随后的单击。

此致

Answer 1

您可以使用状态来处理是否单击它：

state = {
  clicked: false
};

handleClick = () => {
  const {providerName, googleAddress, planOption} = this.state;
  const params = { providerName, address: googleAddress, planOption };

  if (!this.state.clicked) {
    this.props.pcpSearch(params); //redux call disptach

    let pathName = customerId ? `/providers/customers/${customerId}/list/` : `/providers/list/`;
    this.props.history.push({
      pathname: pathName
    });
  } else {
    this.setState({ clicked: true });
  }
};

搜索

现在应该只触发一次。