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

Question

I have a question regarding setting a specific variable based on another. I have stored the gender of the user in the database as U, M, F.

U stands for Undefined, M for Male, F for Female etc.

now I want to show the text Undefined instead of U and Male instead of 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>
  );
};

However once I add this part, the page stops working.

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

This doesn't produce any errors I can see however the page remains blank, doesn't get loaded when this part is added. I didn't even get to using the set variable. Does anyone have an idea on why this happens?

Otherwise, when this part is removed, the code works fine and 'U' is printed in the gender field.

(React, and front-end in general are new to me )

Thanks in advance.

Answer 1

One issue I can see is data can be undefined. So you need to check before picking out gender from data.

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

Also instead of assigning it into a separate variable, you can use a map to store the name mappings and define a function to get user's gender from user object.

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

And use it like

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