Question

以下是Codesandbox链接，可重新创建问题： https://codesandbox.io/s/boring-nash-svcj7?file=/src/index.js

我遇到一个奇怪的问题。我有一个非常简单的安装程序Apollo安装程序仅用于测试目的。它是这样的：

function App() {
  return (
    <ApolloProvider client={client}>
      <Main />
    </ApolloProvider>
  );
}

这只是一个简单的ApolloProvider，可为客户端提供App组件。 App组件只有一行。

const Main = () => {
  const [data, setData] = useState();
  setData(1);
  return <div>Test</div>;
};

现在，当我刷新页面时，出现此错误：

Too many re-renders. React limits the number of renders to prevent an infinite loop.

有人知道这是怎么回事吗？

为什么我不能在组件内部使用简单的钩子？

这是完整的代码：

import React, { useState } from "react";
import ReactDOM from "react-dom";

import ApolloClient from "apollo-client";
import { InMemoryCache } from "apollo-cache-inmemory";
import { HttpLink } from "apollo-link-http";
import { ApolloProvider } from "@apollo/react-hooks";

const client = new ApolloClient({
  link: new HttpLink({
    uri: "https://api.graph.cool/simple/v1/swapi"
  }),
  cache: new InMemoryCache()
});

const Main = () => {
  const [data, setData] = useState();
  setData(1);
  return <div>Test</div>;
};

function App() {
  return (
    <ApolloProvider client={client}>
      <Main />
    </ApolloProvider>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

我正在跟踪一个示例，该示例在起作用起作用，所以我不确定为什么我的示例不起作用。

https://codesandbox.io/s/replace-previous-results-with-next-results-nuu6x?file=/src/FilmTitles.jsx:16-24

Answer 1

不能在组件的setState功能中render。对于功能组件，它们的主体是render函数。在这种情况下，setData更新触发重新渲染的状态，并在每次渲染时在无限循环中再次调用setData：

function App() {
    const [data, setData] = useState(0);
    setData(1); // this triggers re-render which is execution of App() which again calls setData(1)
}

Answer 2

像这样设置State并不是一个好主意，目前，如果您只想尝试将setData放在useEffect中，而不会再次遇到此错误

  useEffect(() => {
    setData(1);
  }, [data]);

在Apollo Provider中使用钩子

2 个答案: