在 useQuery 后反应组件不重新渲染答案

【问题标题】：React component not re-rendering after useQuery在 useQuery 后反应组件不重新渲染
【发布时间】：2021-10-03 23:29:42
【问题描述】：

我正在使用 ApolloClint 的 useQuery 从数据库中获取数据。我遇到的问题是，我从 graphql 获得的结果似乎不会影响 useEffect 内部的依赖，因此在前端收到数据后无法重新渲染。我有这个 React 组件：

export default function PrivateRoute({
  exact,
  path,
  component: Component,
  ...rest
}: Props): ReactElement {
  let [status, setStatus] = useState(false);
  const { data, error, loading } = useQuery(GET_CURRENT_USER);

  useEffect(() => {
    data?.id && setStatus(true);
  }, [data]);

  if (error) console.log(error);
  if (loading) return <Spinner></Spinner>;

  return (
    <Route
      {...rest}
      render={(props) =>
        status ? (
          <>
            <Navbar></Navbar>
            <Component {...props} />
          </>
        ) : (
          <Redirect
            to={{ pathname: "/login", state: { from: props.location } }}
          />
        )
      }
    />
  );
}

我知道 useEffect 在 useQuery 完成之前触发，而不是在第一次渲染时“状态”为假，但它不应该在我放置 useEffect 依赖项后“数据”对象发生更改后重新渲染吗？

这里，我期望如果有用户（数据不是未定义），Route会返回条件的第一个选项。

但是，GraphQL 最终会返回数据，但 react 不会重新渲染。

有什么想法吗？

【问题讨论】：

标签： reactjs react-hooks graphql apollo-client apollo-server

【解决方案1】：

显然，如果我将渲染条件移动到 render=((props) => ...)} 内，它会起作用。

export default function PrivateRoute({
  exact,
  path,
  component: Component,
  ...rest
}: Props): ReactElement {
  const { data, error, loading } = useQuery(GET_CURRENT_USER);

  if (error) console.log(error);
  if (loading) return <Spinner></Spinner>;

  return (
    <Route
      {...rest}
      render={(props) => {
        return data ? (
          <>
            <Navbar></Navbar>
            <Component {...props} />
          </>
        ) : (
          <Redirect
            to={{ pathname: "/login", state: { from: props.location } }}
          />
        );
      }}
    />
  );
}

【讨论】：