Отладка Reren Hooks Rerender проблема - PullRequest
Новая
       6

Отладка Reren Hooks Rerender проблема

0 голосов
/ 20 февраля 2019

У меня есть очень простой хук, который выглядит следующим образом: 

export const QuickViewCell = props => {
  const [hover, setHover] = useState(false)

  const handleMouseEvent = () => {
    console.log('calling')
    setHover(!hover)
  }

  console.log('hoverState', hover)

  return (
    <Box onMouseEnter={handleMouseEvent} onMouseLeave={handleMouseEvent}>
      <Text size="small">
        {String(props.data.name)} this is my custom cell and it is amazing
      </Text>
    </Box>
  )

Он работает, когда помещается в одну часть проекта, но не работает, когда помещается в другую.Это означает, что функция handleMouseEvent всегда вызывается, но компонент не выполняет повторный рендеринг с новым состоянием.React и React-Dom находятся в 16.8.1.Я не получаю никаких ошибок.Я не уверен, где искать ошибку.

Если я изменю его на компонент класса, используя setState, он работает нормально, что заставляет меня думать, что у меня где-то есть проблема несовместимости, но без сообщения об ошибке, не знаю, где искать.Или я упускаю что-то более очевидное:)

Кто-нибудь испытывает что-то подобное?Есть ли способ определить, есть ли несовместимость с другим пакетом?

Ответы [ 2 ]

0 голосов
/ 20 февраля 2019

На основании следующей формулировки в вашем вопросе:

Работает, когда размещается в одной части проекта, но не работает, когда в другой.

Я предположил, что эти два места были частью одной и той же сборки (то есть package.json).Если это так, то кажется маловероятным, что это проблема несовместимости.Но следующий недавний комментарий:

Код для этого компонента идентичен в обоих случаях, в основном это разные пакеты.

делает его похожим на два случаяявляются частью отдельных сборок.Если это так, то я думаю, что теория несовместимости крючков является разумной, хотя я не совсем убежден, потому что в этом случае я ожидаю сообщения в консоли (но я подозреваю, что есть несколько вариантов для нескольких реагирующих копий).проблема, которая не вызвала бы сообщение в консоли).

На следующей странице документации есть инструкции по устранению неисправностей:

https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate-react

На этой странице выНиже вы найдете инструкции по определению, есть ли у вас несколько версий реакции в игре.

Вы можете запустить npm ls react-dom или npm ls react-native в папке приложения, чтобы проверить, какую версию вы используете.Если вы найдете более одного из них, это также может создать проблемы (подробнее об этом ниже).

А затем еще ниже:

Если вы используете Node для пакетауправление, вы можете запустить эту проверку в папке вашего проекта:

npm ls react

Если это не показывает никаких сюрпризов (то есть просто показывает одну копию 16.8.1 для обоихреагировать и реагировать), тогда я бы предпочел предположить, что происходит нечто иное, чем несовместимость, и хотел бы увидеть код, который использует QuickViewCell в проблемном случае.

На тангенциальной нотеЧто касается рекомендации Джаярджо использовать синтаксис «функционального обновления», я думаю, что более подходящий способ обновить это состояние hover, чтобы легче было понять, что он правильный / надежный, состоит в явной передаче логического значения, а не в переключениинезависимо от текущего состояния.

Например: 

export const QuickViewCell = props => {
  const [hover, setHover] = useState(false)

  return (
    <Box onMouseEnter={()=>setHover(true)} onMouseLeave={()=>setHover(false)}>
      <Text size="small">
        {String(props.data.name)} this is my custom cell and it is amazing
      </Text>
    </Box>
  );
}

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

0 голосов
/ 20 февраля 2019

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

Таким образом, вместо setHover(!hover) попробуйте setHover(hover => !hover).Это должно сделать.

...