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 });                }}但是，一旦我添加了这一部分，页面就会停止工作。let userGender = user.gender;  if(userGender === "U"){    userGender = "Undefined";  }这不会产生任何我可以看到的错误，但是页面仍然空白，添加此部分时不会加载。我什至没有开始使用 set 变量。有谁知道为什么会这样？否则，当删除这部分时，代码可以正常工作并且在性别字段中打印“U”。（反应，一般的前端对我来说是新的）提前致谢。

Answer 1

我有一个关于基于另一个变量设置特定变量的问题。我在数据库中将用户的性别存储为 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”。

（反应，一般的前端对我来说是新的）

提前致谢。