Как передать значение состояния в функцию обратного вызова, используя React Hooks - PullRequest
Новая
       9

Как передать значение состояния в функцию обратного вызова, используя React Hooks

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

Создаю панель, используя реагирующий модал , кажется, что все работает нормально.

Но как только модальный режим открыт, мне нужно установить верхнее значение моего модального режима.Я использую ловушки, и всякий раз, когда я пытаюсь обновить значение, попадая в ошибку, ловушки могут вызываться только внутри функций React.Я перепробовал все возможные способы, но не смог решить проблему.

Ожидание: - Должен быть вызван OnAfterOpen, и последнее значение состояния должно быть передано pos prop.

Это то, чтоЯ пытался. 

function useTop() {
  const [top, setTop] = useState('100px');

  useEffect(() => {
    const handleResize = () => {
      const hasRefClientHeight = contentRef.current && contentRef.current.clientHeight;
      hasRefClientHeight < window.innerHeight ? setTop(`calc(100% - ${hasRefClientHeight}px)`) : setTop('100px');
    };
    window.addEventListener('resize', handleResize);
    return () => {
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  return top;
}

const Panel = () => {
   // const newTop = useTop(); -- This is not working as modal content is not ready. Modal Content will be ready only if `onAfterOpen` triggers.

   <Modal pos={useTop} onAfterOpen={useTop}><div ref={contentRef}>Test</div></Modal>
};

Ответы [ 2 ]

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

Действительно, правила перехвата гласят:

https://reactjs.org/docs/hooks-rules.html

Только перехватчики вызовов на верхнем уровне

Дон 'Вызов Хуки внутри циклов, условий или вложенных функций.Вместо этого всегда используйте Hooks на верхнем уровне вашей функции React.Следуя этому правилу, вы гарантируете, что хуки вызываются в одном и том же порядке каждый раз при рендеринге компонента.Это то, что позволяет React правильно сохранять состояние хуков между несколькими вызовами useState и useEffect.(Если вам интересно, мы объясним это более подробно ниже.)

Это необходимо для React, чтобы быть уверенным, что хуки будут вызываться на точно в том же порядке в каждом цикле рендеринга.

Кажется, что Modal вызовет useTop только после монтирования (открытия), то есть, вероятно, пропустит первый рендеринг, нарушая правило хуков и портя порядок.

Одна вещь, которую вы можете попробовать:

Передайте ref для вашего useTop крючка и обработайте его внутри него.Если он нулевой, ничего не делать, если он уже смонтирован, подключите прослушиватель и верните функцию очистки. 

const Panel = () => {
  const newTop = useTop(contentRef);
  <Modal pos={newTop} onAfterOpen={null}><div ref={contentRef}>Test</div></Modal>
};
0 голосов
/ 24 сентября 2019

Наряду с newTop вы можете вернуть функцию, которая запускает пересчет newTop.Подобно тому, как useState делает.И вызвать его onAfterOpen.

...