Javascript React JSX:设置变量导致页面未加载

我有一个关于基于另一个变量设置特定变量的问题。 我已将用户的性别存储在数据库中，如U、M、F

U代表未定义，M代表男性，F代表女性等

现在，我想显示未定义的文本，而不是U和Male，而不是M

export const AccountTile: React.FC = () => {
  const [isEditing, setIsEditing] = React.useState(false);
  const [setAccountUpdate, { data, error }] = useAccountUpdate();
  const { data: user } = useUserDetails();
  
  let userGender = user.gender;
  if(userGender === "U"){
    userGender = "Undefined";
  }
  
  React.useEffect(() => {
    if (data && !error) {
      setIsEditing(false);
    }
  }, [data, error]);
  return (
    <S.TileWrapper>
      <Tile>
        <S.Wrapper>
          <S.Header>MY DATA</S.Header>
          <S.Content>
            <S.HeaderSmall>
              Personal details
              {!isEditing && (
                <IconButton
                  name="edit"
                  size={22}
                  onClick={() => setIsEditing(isEditing => !isEditing)}
                />
              )}
            </S.HeaderSmall>
            {isEditing ? (
              <AccountUpdateForm
                initialValues={{
                    birthday: (user && user.birthday) || "",
                  firstName: (user && user.firstName) || "",
                  gender: (user && user.gender) || "",
                  lastName: (user && user.lastName) || "",
                  
                }}
                handleSubmit={data => {
                  setAccountUpdate({ input: data });
                }}
                hide={() => {
                  setIsEditing(false);
                }}
              />
            ) : (
              <S.ContentOneLine>
                <Attribute
                  description="First Name"
                  attributeValue={(user && user.firstName) || "-"}
                />
                <Attribute
                  description="Last Name"
                  attributeValue={(user && user.lastName) || "-"}
                />
                <Attribute
                  description="Birthday"
                  attributeValue={(user && user.birthday) || "-"}
                />
                <Attribute
                  description="Gender"
                  attributeValue={(user && user.gender) || "-"}
                />
              </S.ContentOneLine>
            )}
          </S.Content>
        </S.Wrapper>
      </Tile>
    </S.TileWrapper>
  );
};

这不会产生我能看到的任何错误，但是页面仍然为空，添加此部分时不会加载。我甚至没有使用set变量。有人知道为什么会这样吗

否则，当删除此部分时，代码正常工作，并且在性别字段中打印“U”

（React和前端对我来说都是新的）

---

提前感谢。

我看到的一个问题是数据可能未定义。所以，在从数据中选择性别之前，您需要进行检查

让userGender=user&&user.gender；
如果（用户性别==“U”）{
userGender=“未定义”；
}

也可以使用映射来存储名称映射，并定义一个函数从用户对象获取用户的性别，而不是将其分配到单独的变量中

const getGender = (user) => {
    const nameMap = {
        U: 'Undefined',
        M: 'Male',
        F: 'Female'
    };
    return nameMap[user?.gender] || "";
}

像这样使用它

...
<AccountUpdateForm
    initialValues={{
        birthday: (user && user.birthday) || "",
    firstName: (user && user.firstName) || "",
    gender: getGender(user),
    lastName: (user && user.lastName) || "",
    
    }}
    handleSubmit={data => {
    setAccountUpdate({ input: data });
    }}
    hide={() => {
    setIsEditing(false);
    }}
...

。。。
{
setAccountUpdate（{input:data}）；
}}
隐藏={（）=>{
设置编辑（假）；
}}
...

您在哪里添加代码块？是的，这很有效，谢谢！我怀疑这是因为“用户”可能是未定义的，因为出现了一个日志，但很少出现。但是，我不认为这会导致问题，因为我只作为登录用户访问此帐户详细信息页面？

...
<AccountUpdateForm
    initialValues={{
        birthday: (user && user.birthday) || "",
    firstName: (user && user.firstName) || "",
    gender: getGender(user),
    lastName: (user && user.lastName) || "",
    
    }}
    handleSubmit={data => {
    setAccountUpdate({ input: data });
    }}
    hide={() => {
    setIsEditing(false);
    }}
...