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

Posted 2023-03-08

【中文标题】在 useQuery 后反应组件不重新渲染

【英文标题】：React component not re-rendering after 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 不会重新渲染。

有什么想法吗？

【参考方案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  
          />
        );
      
    />
  );