调试 React Hooks 渲染问题

Question

我有一个非常简单的钩子，如下所示：

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 将它更改为 class 组件，它工作正常，这让我觉得我在某处遇到了不兼容问题，但没有错误消息，不确定在哪里看。或者我遗漏了更明显的东西:)

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

Answer 1

使用上一个状态计算下一个状态时，建议使用functional updates。

所以不要 setHover(!hover) 试试 setHover(hover => !hover)。应该可以。

Answer 2

根据您问题中的以下措辞：

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 的一个副本用于反应和反应-dom），那么我会继续假设除了不兼容之外还有其他原因继续并希望看到在问题案例中使用 QuickViewCell 的代码。

关于 jayarjo 建议使用 "functional update" 语法的切线说明，我认为更合适的方法是更新此 hover 状态，以便更容易知道它是 correct/robust 将明确传递布尔值，而不是切换当前状态。

例如：

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

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

调试 React Hooks 渲染问题

Debugging React Hooks Rerender issue

javascript

reactjs

react-hooks