React 在触发按钮 onClick 事件时需要两次点击来更新布尔状态

Question

我有一个 React 功能组件，其中有一些输入字段、一个按钮和一个工具提示。默认情况下，工具提示处于禁用状态，只有在输入字段具有无效值时单击按钮时才应启用和可见。

问题是只有按两次按钮才会出现工具提示。当字段无效时，我使用

console.log

调试

handleOnClick

方法中的状态值，并且在

setEnableTooltip(true)

调用之后，

enableTooltip

仍然为 false。之后，如果我在

enableTooltip

中打印日志

MyComponent

，它会打印 true，但它仍然不显示工具提示 - 它仅在我第二次单击按钮时显示。

通过不显示输入字段、工具提示和按钮的细节来简化代码，因为它们来自不同的库。

const handleOnClick = (setEnableTooltip: React.Dispatch<React.SetStateAction<boolean>>) => {
   if (fieldsInvalid()) {
     setEnableTooltip(true);
   } else {
     setEnableTooltip(false);
   }
}

const MyComponent = () => {
   const [enableTooltip, setEnableTooltip] = useState(false);

   return (
      <InputFields />
      <Tooltip disabled={!enableTooltip}>
      <Button slot="trigger" onClick={() => handleOnClick(setEnableTooltip)} />
      Tooltip text
      </Tooltip>
   }
}

我在这里做了一些研究，发现这种情况很可能发生，因为 setState 是异步的，一些解决方案可能是使用回调或 useEffect。我尝试过这些，但没有成功。

当我多次单击按钮时，根本不显示工具提示：

const handleOnClick = (setEnableTooltip: React.Dispatch<React.SetStateAction<boolean>>) => {
   if (fieldsInvalid()) {
     setEnableTooltip(prevState => !prevState);
   } else {
     setEnableTooltip(prevState => !prevState);
   }
}

我还尝试创建另一个状态变量并使用 useEffect 对状态更改做出反应，但这仍然只在第二次单击后显示工具提示：

const handleOnClick = (setIsInvalidValue: React.Dispatch<React.SetStateAction<boolean>>) => {
   if (fieldsInvalid()) {
     setIsInvalidValue(true);
   } else {
     setIsInvalidValue(false);
   }
}

const MyComponent = () => {
   const [enableTooltip, setEnableTooltip] = useState(false);
   const [isInvalidValue, setIsInvalidValue] = useState(false);

   useEffect(() => {
      setEnableTooltip(isInvalidValue);
   }, [isInvalidValue]);

   return (
      <InputFields />
      <Tooltip disabled={!enableTooltip}>
      <Button slot="trigger" onClick={() => handleOnClick(setIsInvalidValue)} />
      Tooltip text
      </Tooltip>
   }
}

此时我陷入困境，不知所措。有人对我能做什么有任何建议吗？

Answer 1

不需要在handleOnclick中传递setState。只需简单地调用该函数即可：

<Button slot="trigger" onClick={handleOnClick} />

你的函数是这样的：

    const handleOnClick = () => {
   if (fieldsInvalid()) {
     setIsInvalidValue(true);
   } else {
     setIsInvalidValue(false);
   }
}

您还需要详细说明 fieldsInvalid 函数。您没有将任何内容传递给函数，因此我们不知道您返回的值是什么。 还将您的函数带入组件内部。