为什么？我得到了比上一次渲染时更多的钩子

Question

我有一个名为use的钩子。

当我硬编码时，

const { comments1 } = useComments(requests[l].id, true);
const { comments2 } = useComments(requests[l].id, true);
const { comments3 } = useComments(requests[l].id, true);

我得到了想要的输出。

但当我使用for循环来获取存储在数组中的ID时，我得到了“比上一次渲染时更多的钩子”错误

for (let l = 0; l < 2; l++) {
  const { comments } = useComments(requests[l].id, true);
  console.log({ [l]: comments });
}

Answer 1

这是对React钩子的限制，因为返回前单个组件内的钩子数量必须是恒定的。

你能做的是——把它分解成一个有固定数量钩子的组件——只有一个:

function Comments({ requestId }) {
  const { comments } = useComments(requestId, true);
  console.log({ [l]: comments });
  
  return null
}

function Wrapper() {
  const requestIds = []
  for (let l = 0; l < 2; l++) {
    requestIds.push(requests[l].id)
  }
  // note we don't use any hooks here.
  
  return requestIds.map((requestId) => <Comments requestId={requestId} />
}