Question

我正在使用 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 不会重新渲染。

有什么想法吗？

Answer 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 } }}
          />
        );
      }}
    />
  );
}

在 useQuery 后不重新渲染 React 组件

1 个答案: