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()}```` , the console gives me检查`，但没有执行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转换为组件并向其传递道具

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>
      )
    )
}

从函数调用LazyQuery挂钩

1 个答案: