在渲染之前在 useQuery 之后解析数据答案

【问题标题】：parse data after useQuery before render在渲染之前在 useQuery 之后解析数据
【发布时间】：2022-01-19 02:34:16
【问题描述】：

我正在尝试构建一个显示数据树的用户页面。但是我遇到的问题是找到查询/解析/然后渲染的正确方法。我将解析放入 onComplete: 因为否则它无法在查询完成之前读取数据的属性。但是一旦我这样做了，渲染就无法读取用户。所以我宣布它为让。目前我的数据显示在控制台中，但正在呈现“用户未定义”条件。

const { userName: userParam } = useParams();

  const { loading, data } = useQuery(userParam ? QUERY_SINGLE_USER : QUERY_ME, {
    variables: { userName: userParam },
    onCompleted: parseData,
  });
 function parseData() {
    user = JSON.parse(data.me.jsonString);
    console.log(data.me.jsonString);
    return user;
  }
  let user;
if (loading) {
    return <div>Loading...</div>;
  }

  if (user == undefined) {
    return <h4>You need to be logged in to see your profile page.</h4>;
  }

  return (
    <div>
      <Header />
      <div id="user-tree">
        {userParam ? <h1>{user.userName}'s Tree</h1> : <h1>My Tree</h1>}

        <OrgChartTree user={user} />

        <FriendsList user={user} />
      </div>
    </div>
  );

事实证明我已经把它复杂化了，我只需要声明用户，然后有条件地运行下面的解析

  const { loading, error, data } = useQuery(
    userParam ? QUERY_SINGLE_USER : QUERY_ME,
    {
      variables: { userName: userParam },
     
    }
  );
  let user;
if (loading) {
    return <div>Loading...</div>;
  }
  if (error) {
    return <div> AHHHHHHHHHHHHHH.......</div>;
  }
 if (data) {
    user = JSON.parse(data.me.jsonString);
  } 
return (
    <div>
      <Header />
      {userParam ? <h1>{user.userName}'s Tree</h1> : <h1>My Tree</h1>}
      {user != undefined ? (
        <div id="user-tree">
          <OrgChartTree user={user} />

          <FriendsList user={user} />
        </div>
      ) : (
        <div>building graph...</div>
      )}
    </div>
  );
};

【问题讨论】：

标签： reactjs graphql

【解决方案1】：

尝试使用useState 钩子代替user

【讨论】：