反应错误：无效的挂钩调用。挂钩只能在功能组件的主体内部调用

Question

我检查了两个钩子违规，我具有相同版本的react和react-dom，并且没有重复的react副本。我无法理解错误实际上是什么？

index.js：3221未捕获的不变违规：无效的挂钩调用。挂钩只能在功能组件的主体内部调用。
发生这种情况可能是由于以下原因之一：
1.您的React和渲染器版本可能不匹配（例如React DOM）
2.您可能违反了《钩子规则》
3.您可能在同一应用程序中拥有多个React副本

我有一组要显示给用户的过滤器：

import Chip from "@material-ui/core/Chip";
import React, { Fragment } from "react";
import Text from "@material-ui/core/text";

function RenderFilter(props) {
  return (
    <Fragment>
      <RenderHeader />
      <RenderX {...props} />
      <RenderSomething {...props} />
    </Fragment>
  );


function RenderSomething(props) {
  const { filters } = props;
  const allowedKeys = Object.keys(filters);
  return (
    <div>
      {allowedKeys.map((item, index) => (
        <Fragment key={index}>
          <div
            style={{
              display: "flex",
              justifyContent: "space-between",
              margin: "8px 0px"
            }}
          >
            <div style={{ borderBottom: "1px #f6f6f6" }}>
              <div style={{ maxWidth: 200 }}>
                <Text>{item}</Text>
              </div>
              <div>
                {filters[item].map(ele => (
                  <Chip key={`${ele}`} color="primary" label={`${ele}`} />
                ))}
              </div>
            </div>
          </div>
        </Fragment>
      ))}
    </div>
  );
}