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 = () => {&nbsp; const [isEditing, setIsEditing] = React.useState(false);&nbsp; const [setAccountUpdate, { data, error }] = useAccountUpdate();&nbsp; const { data: user } = useUserDetails();&nbsp;&nbsp;&nbsp; let userGender = user.gender;&nbsp; if(userGender === "U"){&nbsp; &nbsp; userGender = "Undefined";&nbsp; }&nbsp;&nbsp;&nbsp; React.useEffect(() => {&nbsp; &nbsp; if (data && !error) {&nbsp; &nbsp; &nbsp; setIsEditing(false);&nbsp; &nbsp; }&nbsp; }, [data, error]);&nbsp; return (&nbsp; &nbsp; <S.TileWrapper>&nbsp; &nbsp; &nbsp; <Tile>&nbsp; &nbsp; &nbsp; &nbsp; <S.Wrapper>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <S.Header>MY DATA</S.Header>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <S.Content>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <S.HeaderSmall>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Personal details&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {!isEditing && (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <IconButton&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; name="edit"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; size={22}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onClick={() => setIsEditing(isEditing => !isEditing)}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; )}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </S.HeaderSmall>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {isEditing ? (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <AccountUpdateForm&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; initialValues={{&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; birthday: (user && user.birthday) || "",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; firstName: (user && user.firstName) || "",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; gender: (user && user.gender) || "",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; lastName: (user && user.lastName) || "",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; handleSubmit={data => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setAccountUpdate({ input: data });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; hide={() => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setIsEditing(false);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ) : (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <S.ContentOneLine>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Attribute&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; description="First Name"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; attributeValue={(user && user.firstName) || "-"}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Attribute&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; description="Last Name"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; attributeValue={(user && user.lastName) || "-"}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Attribute&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; description="Birthday"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; attributeValue={(user && user.birthday) || "-"}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Attribute&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; description="Gender"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; attributeValue={(user && user.gender) || "-"}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </S.ContentOneLine>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; )}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </S.Content>&nbsp; &nbsp; &nbsp; &nbsp; </S.Wrapper>&nbsp; &nbsp; &nbsp; </Tile>&nbsp; &nbsp; </S.TileWrapper>&nbsp; );};但是，一旦我添加了这一部分，页面就会停止工作。let userGender = user.gender;&nbsp; if(userGender === "U"){&nbsp; &nbsp; userGender = "Undefined";&nbsp; }这不会产生任何我可以看到的错误，但是页面仍然空白，添加此部分时不会加载。我什至没有开始使用 set 变量。有谁知道为什么会这样？否则，当删除这部分时，代码可以正常工作并且在性别字段中打印“U”。（反应，一般的前端对我来说是新的）提前致谢。