react 报错解决 Rendered more hooks than during the pre

const RenderItem = (item) => {
  const { children } = item;
  const [showChild, setShowChild] = useState(false);
  return (
    <>
      <div>Item!!!</div>
      {showChild && children.length > 0 && (
        <>
          // 使用普通函数会报错
          {children.map((ele) => (
            <>{RenderItem(ele)}</>
          ))}
        </>
      )}
    </>
  );
};

上面的代码会报错：Rendered more hooks than during the previous render.

将调用自身那行改成这种就好了：

{children.map(ele => <RenderItem item={ele} />}

按照规范，RenderItem，R要大写