Reactjs 从graphql useQuery检索的数据未显示在子组件中，但在状态和属性中可用

我遇到了一个问题，这可能是因为我对graphql和react渲染方法的理解有限。话虽如此，我希望有人能帮忙

我有一个带有用户和用户组件的简单应用程序

我使用Apollo useQuery钩子检索用户应用程序中的数据。然后，我通过直接将数据添加为道具和useState将数据向下传递给用户组件。
当我访问Chrome和Apollo开发者工具时，我可以看到道具和状态数据是正确的。
但用户组件中的文本字段显示空数据。
用户组件中的文本字段显示得很好

USERS.js

导出默认函数用户（）{
const[UserInfo，setUserInfo]=useState（{}）；
const{loading，error，data}=useQuery（用户数据）；
const{register，watch，handleSubmit，control，reset，errors}=useForm（）；
useffect（（）=>{
//如果（数据）{
//const{id，name，username}=data.users.data[0]；
//setUserInfo（{id，name，username}）；
// }
if（加载===false&&data）{
setUserInfo（data.users.data[0]）；
}
}，[加载，数据]；
如果（加载）返回加载…
；
if（error）返回错误：（
；
返回(
你好
{console.log（数据）}
{/*用户组件*/}
从用户组件
);
}

User.js

导出默认函数用户（{id，UserInfo，name，username}）{
const{register，watch，handleSubmit，control，reset，errors}=useForm（）；
返回(
从用户组件
);
}

我做错了什么

---

CODESANDBOX在这里可用：

因此我最终不得不在用户组件中添加一个条件语句以使其工作。这是否是最佳解决方案有待讨论。如果有更好的解决方案，请让我知道

更新代码：

USERS.js

导出默认函数用户（）{
const[UserInfo，setUserInfo]=useState（未定义）；
const{loading，error，data}=useQuery（用户数据）；
const{register，watch，handleSubmit，control，reset，errors}=useForm（）；
useffect（（）=>{
//如果（数据）{
//const{id，name，username}=data.users.data[0]；
//setUserInfo（{id，name，username}）；
// }
if（加载===false&&data）{
setUserInfo（data.users.data[0]）；
}
}，[加载，数据]；
如果（加载）返回加载…
；
if（error）返回错误：（
；
返回(
你好
{console.log（数据）}
{/*用户组件*/}
从用户组件
{/*=======添加了以下条件===*/}
{UserInfo！==未定义(
)：null}
);
}

USER.js

导出默认函数用户（{id，UserInfo，name，username}）{
const{register，watch，handleSubmit，control，reset，errors}=useForm（）；
返回(
从用户组件
);
}