IconButton 适用于第二次点击答案

【问题标题】：IconButton works on secound clickIconButton 适用于第二次点击
【发布时间】：2019-09-05 16:28:08
【问题描述】：

这让我发疯了。 onClick 处理程序在第二次点击时触发。我不知道为什么。功能组件非常简单，应该可以工作。该组件是另一个组件的一部分。所以是个孩子。父母补偿在名单上。这就是整个设置。如果我第一次点击我在调试中看到它不会触发事件。 IconButton 的样式跨度在第一次单击时发生变化。奇怪

const MoreInfo = () => {
  const [more_info, setMore_info] = useState("test");
  const handleExpand = event => {
    if (icon_expand === "expand_more") {
      setMore_info("test2");
    }
  };

  return (
    <IconButton onClick={handleExpand} aria-label="location" size="small">
      <Icon style={{ fontSize: 12 }}>{icon_expand} </Icon>
    </IconButton>
  );
};
export default MoreInfo;

【问题讨论】：

什么是icon_expand？它来自哪里？
它是一个状态变量，但它很重要，因为在第一次单击时它没有触发 CLIK handleExpand，我不知道为什么。它在第二次单击时工作（“调试捕获并进入功能”）。我什至将函数组件重写为类，结果仍然相同。组件中按钮的处理方式是否有任何限制？

标签： reactjs material-ui

【解决方案1】：

实际上，它确实按您的预期工作。

我只是将您的代码复制粘贴到代码沙箱中，它确实有效here。

https://codesandbox.io/s/zen-dan-d5r8r

但是，正如您提到的整个组件树，它是任何父组件的子组件。

所以我猜你应该检查一下：

检查父级的 onClick 并确保它不与任何其他 onClick ( name ) 冲突。
确保状态更新正常工作
检查所有方法是否已绑定（仅在适用时）

【讨论】：

这很奇怪，因为当我将代码放在父组件外部的组件中时发生了这种情况