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

Question

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

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

现在我想显示文本 Undefined 而不是 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>
  );
};

但是，一旦我添加了这部分，页面就会停止工作。

let userGender = user.gender;
  if(userGender === "U"){
    userGender = "Undefined";
  }

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

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

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

提前致谢。

Answer 1

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

let userGender = user && user.gender;
  if(userGender === "U"){
    userGender = "Undefined";
}

除了将其分配给单独的变量之外，您还可以使用映射来存储名称映射并定义一个函数来从用户对象中获取用户的性别。

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