如何重置反应钩子状态？答案

【问题标题】：how to reset react hooks state?如何重置反应钩子状态？
【发布时间】：2019-09-24 07:54:32
【问题描述】：

我对反应有点陌生，我阅读了this doc about hooks，并且我有一个带有显示更多选项的弹出窗口。显示更多功能需要在点击时显示额外的文本，并在弹出框消失后隐藏。

popover 函数是：

export default function Popover(props) {

  const [viewDetails, setViewDetails] = useState(false);

  return (
    <div>
          <h5>{props.title}</h5>

          {viewDetails ?
            'yes, more details here ...' : 'no'}

          <span onClick={() => {setViewDetails(!viewDetails); console.log(viewDetails)}}>Show more</span>

    </div>
  );
}

我需要一个简单的局部变量，它只有在弹出框处于活动状态时才会具有“状态”。

为什么我不能这样做：

export default function Popover(props) {

      let viewDetails = false;

      return (
        <div>
              <h5>{props.title}</h5>

              {viewDetails ?
                'yes, more details here ...' : 'no'}

              <span onClick={() => {viewDetails = !viewDetails; console.log(viewDetails)}}>Show more</span>

        </div>
      );
    }

？我看到显示弹出框时的值是 always false，我可以在点击时将其设置为 true，但 {viewDetails ? 'yes, more details here ...' : 'no'} 不会改变

【问题讨论】：

您实际上是在展示钩子的用途：在函数调用之间保持状态值。在您的第二个示例中，每次呈现 Popover 时，都会创建 viewDetails 并将其设置为 false，因此您看不到任何 UI 更改。你为什么不想使用useState？
不是很清楚问题是什么。第一个代码 sn-p 已经按照您的描述工作（当viewDetails 为真时会显示额外的文本。）
@GaëlS 如果未单击按钮，我不想显示更多详细信息，我认为这是最简单的方法...我只想在弹出框处于活动状态时才拥有变量跨度>
@JJJ 的问题是，在第一个示例中，如果鼠标再次悬停在弹出框触发器上，我不想显示更多详细信息，而在第二个示例中，shortif 不起作用
仍然不清楚这意味着什么。您的意思是您只想显示一次消息，并且当用户单击按钮时，消息将被删除并且不再显示（无论用户再次单击按钮多少次）？然后你只需添加一个单独的状态钩子。

标签： reactjs react-hooks

【解决方案1】：

不是状态变量的变量不会导致重新渲染。

你可以通过lifting state up解决这个问题。

将您设置视图的方式移动到父组件。

function Details(props) {
  return (
    <div>
      <h5>{props.title}</h5>
      <span>{props.details}</span>
    </div>
  );
}

function Popover(props) {
  const [view, setView] = useState(false);

  return (
    <>
      { view && <Details details={props.details} /> }
      <span onClick={() => setView(!view)}>
        Show { view ? 'less': 'more' }
      </span>
    </>
  );
}

【讨论】：

是的...但是状态会持续存在...每次渲染Popover函数时我都需要一个简单的变量
一个不是状态变量的变量不能导致重新渲染。