javascript - 从函数调用 LazyQuery Hook

Question

我正在使用这样的 graphql 查询:

 const [loadUsers, { loading, data }] = useLazyQuery(LoadUsersQuery);

如果我在代码中使用它，惰性查询 loadUsers 就会起作用并显示结果:

return (
    <div>
        <StyledSearchBar
          value={searchItem}
          onChange={value => {
            setSearchItem(value);
          }}
          onRequestSearch={() => loadUsers()}
        />
        {data &&
          data.users.nodes &&
          data.users.nodes.map((c: any, i: any) => (
            <li key={i}>
              Id: {c.id}, First Name: {c.firstName}, Last Name: {c.lastName},
              Email: {c.email}, phoneNumber: {c.phoneNumber}
            </li>
          ))}
      )
    </div>
  );
}

但是，如果我将 onRequestSearch={() => loadUsers()} 更改为 onRequestSearch={() => ShowUsers()}```` ，控制台会给我检查```但没有执行任何 graphql 查询，也没有显示结果。

function ShowUsers() {
    console.log('Check');
    loadUsers();
    {data &&
      data.users.nodes &&
      data.users.nodes.map((c: any, i: any) => (
        <li key={i}>
          Id: {c.id}, First Name: {c.firstName}, Last Name: {c.lastName},
          Email: {c.email}, phoneNumber: {c.phoneNumber}
        </li>
      ))}

为什么会这样？

编辑:

这会运行突变，但不会加载用户。

onRequestSearch={() => ShowUsers()}

 function ShowUsers() {
    console.log('Checkk');
    loadUsers();
    return (
      <div>
        <Typography>Checking</Typography>
        {data &&
          data.users.nodes &&
          data.users.nodes.map((c: any, i: any) => (
            <li key={i}>
              Id: {c.id}, First Name: {c.firstName}, Last Name: {c.lastName},
              Email: {c.email}, phoneNumber: {c.phoneNumber}
            </li>
          ))}
      </div>
    );
}

Answer 1

您无法从处理函数中返回 JSX，但是您可以将映射的 JSX 转换为组件并将 props 传递给它

const [loadUsers, { loading, data }] = useLazyQuery(LoadUsersQuery);
return (
    <div>
        <StyledSearchBar
          value={searchItem}
          onChange={value => {
            setSearchItem(value);
          }}
          onRequestSearch={() => loadUsers()}
        />
        <ShowUsers data={data}/>
      )
    </div>
  );
} 

function ShowUsers({data}) {
    console.log('Check');

    return data &&
      data.users.nodes &&
      data.users.nodes.map((c: any, i: any) => (
        <li key={i}>
          Id: {c.id}, First Name: {c.firstName}, Last Name: {c.lastName},
          Email: {c.email}, phoneNumber: {c.phoneNumber}
        </li>
      )
    )
}