как сбросить состояние реагирующих хуков? - PullRequest
Новая
       7

как сбросить состояние реагирующих хуков?

0 голосов
/ 24 сентября 2019

Я немного новичок, чтобы отреагировать, я прочитал этот документ о хуках , и у меня есть поповер с опцией Показать больше.Функция show more должна показывать дополнительный текст при нажатии и скрывать после исчезновения popover.

функция 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>
      );
    }

?Я вижу, что значение всегда false, когда отображается всплывающее окно, и я могу установить для него значение true при нажатии, но {viewDetails ? 'yes, more details here ...' : 'no'} не изменяется

1 Ответ

1 голос
/ 24 сентября 2019

Переменная, которая не является переменная состояния не может вызвать повторную визуализацию.

Это можно решить с помощью поднятие состояния вверх .

Переместите способ установки представления на родительский компонент. 

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