Error: Rendered more hooks than during the previous render

Question

我有一个在页面加载时呈现的组件，然后进行一些调用以在客户端获取数据。在初始加载时，一切都按预期工作。但是，当我单击“查看更多”按钮进行新调用时，控制台中出现错误，提示“渲染的挂钩比上一次渲染时多”。有人对此处可以编辑的内容有任何意见吗？因为此时我有点迷茫

Error: Rendered more hooks than during the previous render.
    at updateWorkInProgressHook (react-dom.development.js:15115)
    at updateMemo (react-dom.development.js:15583)
    at Object.useMemo (react-dom.development.js:16055)
    at useMemo (react.development.js:1607)
    at SecondCall (SecondCall.js:30)
    at renderWithHooks (react-dom.development.js:14938)
    at updateFunctionComponent (react-dom.development.js:17169)
    at beginWork (react-dom.development.js:18745)
    at HTMLUnknownElement.callCallback (react-dom.development.js:182)

const SomeItems = (guid) => {
  const {
    data: dataR,
    loading: loadingR,
    error: errorR
  } = useQuery(
    'foo',
    {
      variables: { guid }
    }
  );

  const list = dataR?.foo?.relatedProducts || [];
  const urls = list.map((prod) => prod.url);
  const properties = urls.map((url) => url.substr(url.lastIndexOf('/') + 1));
  const firstvalues = properties.slice(0, 3) || [];

  const [flag, setFlag] = useState(false);
  return (
    <div>
      <h4>Shop this Project</h4>
      <div id="values">
        {
          flag
          ? <SecondCall properties={[properties]} />
          : <FirstCall properties={[firstvalues]} />
        }
        <div>
          <button
            id="products"
            type="button"
            onClick={() => setFlag(true)}
          >
            See More
          </button>
        </div>
      </div>
    </div>
  );
}

export const SecondCall = ( properties ) => {
  const valueArray = Object.values(properties);
  const [[destructedValues]] = valueArray;
  const {
    data,
    loading,
    error,
  } = useQuery(
    'foo2',
    {
      variables:{ value: destructedValues}
    }
  );

  if (!data || loading || error) {
    return null;
  }

  const list = data?.foo2?.prods || [];
  const items = list.map((prods) => prods.id);
  const {
    data: dataFLS,
    loading: loadingFLS,
    error: errorFLS,
  } = useQuery(
    'foo3',
    {
      variables: {items}
    }
  );

  if (!dataFLS || loadingFLS || errorFLS) {
    return null;
  }

  const data = dataFLS?.foo3?.prods || [];
  return data.map((products, index) => (
    <div key={`prods-${index}`}>
      <Row key={`related-products-${index}`}>
        "some divs get rendered with data" 
      </Row>
    </div>
  );
};

export const firstCall = ( firstvalues ) => {
  const valueArray = Object.values(firstvalues);
  const [[destructedValues]] = valueArray;
  const {
    data,
    loading,
    error,
  } = useQuery(
    'foo2',
    {
      variables: { value: destructedValues}
    }
  );

  if (!data || loading || error) {
    return null;
  }

  const list = data?.foo2?.prods || [];
  const items = list.map((prods) => prods.id);
  const {
    data: dataFLS,
    loading: loadingFLS,
    error: errorFLS,
  } = useQuery(
    'foo3',
    {
      variables: {items}
    }
  );

  if (!dataFLS || loadingFLS || errorFLS) {
    return null;
  }

  const data = dataFLS?.foo3?.prods || [];
  return data.map((products, index) => {
    return (
      <div key={`prods-${index}`}>
        <Row key={`related-products-${index}`}>
          "some divs get rendered with data" 
        </Row>
      </div>
    );
  );
};

Answer 1

在您的 SecondCall 组件中，您在 if 语句中 return null。但是由于 useQuery 是一个钩子，所有 useQuery 语句都需要运行 before you return anything.

const {data, loading, error} = useQuery('foo2', {
  variables:{ value: destructedValues}
})

const list = data?.foo2?.prods || [];
const items = list.map((prods) => prods.id);

const {data: dataFLS, loading: loadingFLS, error: errorFLS} = useQuery('foo3', {
  variables: {items}
});

if (!data || loading || error || !dataFLS || loadingFLS || errorFLS) {
    return null;
}

编辑：显然您也在 FirsCall 中使用了两个 useQuery 语句。同样的逻辑也适用于那里。

Error: Rendered more hooks than during the previous render

Error: Rendered more hooks than during the previous render

javascript

reactjs

graphql-js

react-apollo