React setState 不会再次变为 false

Question

我有一个非常简单的代码，我使用 setState。默认值是false，有一个叫openQueryDetails的函数，我把setState的值改成true（表示显示commonents）

另一个函数(closeQueryDetails)，returnsetState为false，需要隐藏显示的组件

使 setState 为 true 确实有效，但是 return false 和隐藏组件不起作用。

当我运行使用调试器时，我看到 它确实进入并进入 closeQueryDetails 函数，但最后，视图没有改变并保持不变与 setState 为真时相同。

function Feed(props) {
  const [queryDetailsIsOpen, setQueryDetailsIsOpen] = useState(false);

  function openQueryDetails()  { setQueryDetailsIsOpen(true);  }
  function closeQueryDetails() { setQueryDetailsIsOpen(false); }
  
return (
    <div onClick={openQueryDetails}>
      ...
      {queryDetailsIsOpen && <QueryResultView query={props.query} onClose={closeQueryDetails} />}
      {queryDetailsIsOpen && <Backdrop onClose={closeQueryDetails}/>}
    </div>
  );
}

function Backdrop(props) {
    return <div className="backdrop" onClick={props.onClose} />;
}

感谢您的帮助！ (-:

Answer 1

Backdrop 组件在具有属性 onClick={openQueryDetails} 的 div 中。所以你的电话关闭然后立即再次打开。请看event.stopPropagation()。如果您将此调用添加到您的关闭函数，这将阻止进一步传播。

React setState 不会再次变为 false

React setState not become false again

setstate

reactjs