Question

我正在React中使用MouseEvent<HTMLElement>转换按钮组件以使用Hooks。但是，每个鼠标事件现在都出现RangeError: Maximum call stack size exceeded错误。

新代码是

  const [isActive, setIsActive] = useState(false);
  const [isFocus, setIsFocus] = useState(false);
  const [isHover, setIsHover] = useState(false);

  useEffect(() => {
    if (autoFocus && button instanceof HTMLButtonElement) {
      button.focus();
    }
  }, [autoFocus, button]);

  const isInteractive = () => !isDisabled && !isLoading;

  const onMouseEnter = (e: MouseEvent<HTMLElement>) => {
    setIsHover(true);
    if (onMouseEnter && !isHover) {
      onMouseEnter(e);
    }
  };

  const onMouseLeave = (e: MouseEvent<HTMLElement>) => {
    setIsActive(false);
    setIsHover(false);
    if (onMouseLeave && isHover) {
      onMouseLeave(e);
    }
  };

  const onMouseDown = (e: MouseEvent<HTMLElement>) => {
    e.preventDefault();
    setIsActive(true);
    if (onMouseDown && !isActive) {
      onMouseDown(e);
    }
  };

  const onMouseUp = (e: MouseEvent<HTMLElement>) => {
    setIsActive(true);
    if (onMouseUp && !isActive) {
      onMouseUp(e);
    }
  };

  const onFocus: FocusEventHandler<HTMLButtonElement> = event => {
    setIsFocus(true);
    if (onFocus) {
      onFocus(event);
    }
  };

  const onBlur: FocusEventHandler<HTMLButtonElement> = event => {
    setIsFocus(false);
    if (onBlur) {
      onBlur(event);
    }
  };

  const onInnerClick: MouseEventHandler<HTMLElement> = e => {
    if (!isInteractive()) {
      e.stopPropagation();
    }
    return true;
  };

  const StyledButton: ReactType = CustomComponent || getElement();
  render() {
    return (
      <StyledButton
        onMouseEnter={onMouseEnter}
        onMouseLeave={onMouseLeave}
        onMouseDown={onMouseDown}
        onMouseUp={onMouseUp}
        onFocus={onFocus}
        onBlur={onBlur}
      >
        {children}
      </StyledButton>
    );
  };

原始代码是有效的

state = {
  isActive: false,
  isFocus: false,
  isHover: false,
};

componentDidMount() {
  if (this.props.autoFocus && this.button instanceof HTMLButtonElement) {
    this.button.focus();
  }
}

isInteractive = () => !this.props.isDisabled && !this.props.isLoading;

onMouseEnter = (e: React.MouseEvent<HTMLElement>) => {
  this.setState({ isHover: true });
  if (this.props.onMouseEnter) {
    this.props.onMouseEnter(e);
  }
};

onMouseLeave = (e: React.MouseEvent<HTMLElement>) => {
  this.setState({ isHover: false, isActive: false });
  if (this.props.onMouseLeave) {
    this.props.onMouseLeave(e);
  }
};

onMouseDown = (e: React.MouseEvent<HTMLElement>) => {
  e.preventDefault();
  this.setState({ isActive: true });
  if (this.props.onMouseDown) {
    this.props.onMouseDown(e);
  }
};

onMouseUp = (e: React.MouseEvent<HTMLElement>) => {
  this.setState({ isActive: false });
  if (this.props.onMouseUp) {
    this.props.onMouseUp(e);
  }
};

onFocus: React.FocusEventHandler<HTMLButtonElement> = event => {
  this.setState({ isFocus: true });
  if (this.props.onFocus) {
    this.props.onFocus(event);
  }
};

onBlur: React.FocusEventHandler<HTMLButtonElement> = event => {
  this.setState({ isFocus: false });
  if (this.props.onBlur) {
    this.props.onBlur(event);
  }
};

onInnerClick: React.MouseEventHandler<HTMLElement> = e => {
  if (!this.isInteractive()) {
    e.stopPropagation();
  }
  return true;
};

const StyledButton: React.ReactType = CustomComponent || this.getElement();
render() {
  return (
    <StyledButton
      onMouseEnter={onMouseEnter}
      onMouseLeave={onMouseLeave}
      onMouseDown={onMouseDown}
      onMouseUp={onMouseUp}
      onFocus={onFocus}
      onBlur={onBlur}
    >
      {children}
    </StyledButton>
  );
};

我在带有钩子的新代码中错过了什么，这些钩子导致event重复出现？

Answer 1

我认为问题是您对useEffect的使用。我认为在useEffect中为deps Array提供的两个值是导致此问题的原因。等效于componentDidMount，它将被调用一次，即具有一个空数组或根本没有数组。

这意味着将您的useEffect代码更改为如下

useEffect(() => {
    if (autoFocus && button instanceof HTMLButtonElement) {
      button.focus();
    }
  }, []);

这样做的原因是，如果这些值中的任何一个被更改，都会再次调用useEffect，这将导致按钮和自动对焦的重新渲染和重新定义（我假设），然后再次调用useEffect，从而导致无限递归。

在第一个示例中https://reactjs.org/docs/hooks-effect.html#example-using-hooks

中可以找到更多信息。

希望这会有所帮助：D 祝你好运！

注意：我实际上并没有运行您的代码，我只是假设这是问题所在

MouseEvent <HTMLElement>给出错误超出最大调用堆栈大小

1 个答案: