Question

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

弹出窗口功能是：

let keys = Object.keys(data);
(keys||[]).forEach(function(item, index) {
    console.log(data[item], index); // You will get the each object key value here
});

我需要一个简单的局部变量，该局部变量仅在弹出窗口处于活动状态时才具有“状态”。

为什么我不能做类似的事情：

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> ); }，我可以在点击时将其设置为true，但false不变

Answer 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>
    </>
  );
}

如何重设反应挂钩状态？

1 个答案: