Question

我正在尝试使用 useState 更新值，但它没有更新值

这是我的代码：

在此代码中，当我单击项目 div 时，它会显示详细信息，但是当我单击隐藏按钮时，它不会隐藏详细信息。

const [show, setShow] = useState(false);

function showDetails() {
   setShow(true);
}

function hideDetails() {
   setShow(false);
}

<div className="item" onClick={showDetails}>  
   some code...
</div>

{show
  ? <div className="details-container">
    some code...
    <button onClick={hideDetails}>Hide</button>
    </div>
  : null
}

Answer 1

没有看到整个组件的视图很难说，但问题可能出在您的 HTML 代码的结构上。

如果调用 hide 方法的按钮位于显示它的 div 内部，则事件传播很可能是问题的根源。假设您的视图具有如下结构：

<div className="item" onClick={showDetails}>
  {show ? (
    <div className="details-container">
      <button onClick={hideDetails}>Hide</button>
    </div>
  ) : null}
</div>

您调用 setState 的方式本身并没有错，但是当您点击按钮时，会发生两件事：

点击按钮时会调用 hideDetails 方法，因此 show 设置为 false。
点击事件传播到父元素，并且由于按钮位于 div 内，这会导致 showDetails 再次运行并{ {1}} 重新设置为 show。

这最后一步解释了为什么即使单击按钮后您的元素仍然显示。对此的解决方案是停止 true 方法上的事件传播，如下所示：

hideDetails

停止传播将确保只有按钮的点击事件处理程序运行，因此在点击按钮时将不再执行 function hideDetails(e) { e.stopPropagation(); setShow(false); }。

完整的工作示例如下：

showDetails

const App = () => {
  const [show, setShow] = React.useState(false);

  const showDetails = () => {
    setShow(true);
  };

  const hideDetails = (e) => {
    e.stopPropagation();
    setShow(false);
  };

  return (
    <div className="item" onClick={showDetails}>
      <b>Item</b>
      {show ? (
        <div className="details-container">
          <p>Details</p>
          <button onClick={hideDetails}>Hide</button>
        </div>
      ) : null}
    </div>
  );
};

ReactDOM.render(
  <App />,
  document.getElementById("react")
);

.item {
  padding: 1em;
  background: #CCCCCC;
  border: black solid 1px;
}

.details-container {
  padding: 1em;
  background: #EEEEEE;
  border: black solid 1px;
}

p {
  margin: 0 0 .5em 0;
}

useState 不更新值

1 个答案: