javascript - 调试 React Hooks 渲染问题

Question

我有一个非常简单的钩子(Hook)，如下所示:

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 将它更改为类组件，它工作正常，这让我觉得我在某个地方遇到了不兼容问题，但没有错误消息，不知道去哪里找。或者我遗漏了一些更明显的东西:)

有人遇到过这样的事情吗？有没有办法确定是否与另一个软件包不兼容？

Answer 1

基于您问题中的以下措辞:

It works when placed in one part of the project, but doesn't when placed in another.

我假设这两个地方是同一构建的一部分(即相同的 package.json)。如果真是这样，那似乎不太可能是不兼容问题。但以下最近的评论:

The code for this component is identical in both cases, it's mainly the packages that are different.

听起来这两个案例是单独构建的一部分。如果这是真的，那么我认为 hook-incompatibility 理论是合理的，尽管我并不完全相信，因为我希望在这种情况下控制台中会出现一条消息(但我怀疑 multiple-react-copies 有一些变化不会在控制台中导致消息的问题)。

文档中的以下页面包含有关解决此问题的说明:

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

在该页面上，您会找到以下说明，用于确定您是否有多个版本的 React 在玩。

You can run npm ls react-dom or npm ls react-native in your application folder to check which version you’re using. If you find more than one of them, this might also create problems (more on that below).

然后再往下:

If you use Node for package management, you can run this check in your project folder:

npm ls react

如果这没有显示出任何意外(即只显示 16.8.1 的一个副本用于 react 和 react-dom)，那么我会继续假设除了不兼容之外还有其他事情正在发生并且想要查看问题案例中使用 QuickViewCell 的代码。

关于 jayarjo 建议使用“功能更新”语法的切线说明，我认为更新此 hover 状态以便更容易知道它是正确/稳健的更合适的方法是是显式传递 bool 值，而不是切换当前状态。

例如:

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

这让您更容易确信您不会意外地陷入悬停卡住的状态，这与其应有的状态相反。