动态导入组件时无效的挂钩调用

Question

我有此设置：

使用挂钩的组件A

导入组件A的组件B

测试B时，我会在require(B)上用beforeEach动态重新导入它，并通过jest.resetModules()重置模块 动态导入以更新其他模拟值。

这似乎导致Invariant Violation: Invalid hook call。我不确定为什么会这样。有人碰到这个吗？这里有什么解决办法？

这是一个人为的示例https://codesandbox.io/s/cocky-hodgkin-gz1tl，由于某种原因，它在沙箱中运行良好，但在本地失败

Answer 1

问题在于您的Item通过items返回状态和函数。

export function Item() {
  const items = React.useState([123, 234, 768]);
  return <div>Items - {items}</div>; <--- problem
}

来自useState()：

  

它返回一对值：当前状态和一个更新状态的函数。

应该是：

export function Item() {
  const [items, setItems] = React.useState([123, 234, 768]);
  return <div>Items - {items}</div>;
}

或

return <div>Items - {items[0]}</div> <--- return state only