javascript - React - 使用 Hooks 根据 History.location.path 更改 onClick 行为

Question

我有一个返回函数的按钮，但我希​​望它根据当前 URL 返回两个函数之一(一个按钮 - 根据您所在的位置执行两件事)。

以下是该按钮当前的功能:

const showApplyButton = () => {
    return (
      <button onClick={addToCart} className="btn btn-outline-info mt-2 mb-2">
          Apply 
      </button>
    );
  };

我希望 onClick 根据当前 URL 返回不同的函数。

我的尝试是:

  const applyButtonBehaviour = (history) => {
  if(history.location.pathname === "/Cart") {
    console.log("Hello world");
  } else {addToCart(history)};
};

  const showApplyButton = (history) => {
    return (
      <button onClick={applyButtonBehaviour(history)} className="btn btn-outline-info mt-2 mb-2">
          Apply 
      </button>
    );
  };

以上用途

import {withRouter} from 'react-router-dom';

和

export default withRouter(Card);

传承历史。

不幸的是，我收到此错误:

当我恢复到原来的“无条件”解决方案时，错误就会消失，该解决方案仅表现出一种行为，无论当前位置/路径如何。

非常感谢任何建议 - 谢谢。

Answer 1

问题似乎是无限渲染循环。当组件呈现按钮时，它会立即调用onClick={applyButtonBehaviour(history)}。调用 applyButtonBehaviour 函数时，它会立即调用 console.log 或 addToCart。

假设 addToCart 本身正在执行一些触发重新渲染的操作(状态更新等)。当组件重新渲染时，它会再次调用所有这些方法，陷入无限渲染循环。如果您只想在单击时发生这种情况，则应该将单击处理程序包装在一个函数中，仅在单击时调用(而不是在渲染时立即调用)。

有两个选项:

<button onClick={() => applyButtonBehaviour(history)} ...>

或

const applyButtonBehaviour = (history) => () => { ... };