如何在 Ionic React 中将 null 转换为空字符串？答案

【问题标题】：How to convert null to empty String in Ionic React?如何在 Ionic React 中将 null 转换为空字符串？
【发布时间】：2021-07-25 18:00:26
【问题描述】：

我想在 API 端点中提交表单。我有很多输入，但在这里我只包括导致错误的输入：“电话”输入，这不是必需的。当我不填写“电话”输入时，我收到此错误：

{validation_messages: {phone: {stringLengthInvalid: "Invalid type given. String expected"},…},…}
detail: "Failed Validation"
status: 422
title: "Unprocessable Entity"

在后端，它接受字符串或空字符串''。 错误： { “电话”：空， } 正确的： { “电话”： ”” }

我的组件：

const UpdateData: React.FC = () => {
  const {
    phone,
    setPhone,
  } = React.useContext(MyContext);

  
  const updateContact = () => {
    const data = {
   
      phone: phone,
     
    };

    axios
      .put("/xx/update", data)
      .then((response) => {
        setPhone(response.data.phone);
        return response.data;
      })
      .catch((error) => {
        setMessage("Sth went wrong!");
        setIserror(true);
      });
  };

  return (
    <React.Fragment>
      <IonPage className="ion-page" id="main-content">
        <IonContent className="ion-padding">
          <IonGrid>
                <form className="ion-padding">
 
                  <IonItem>
                    <IonLabel position="floating">Phone</IonLabel>
                    <IonInput
                      placeholder="Example: 0333-12345678"
                      value={phone}
                      onIonChange={(e) => setPhone(e.detail.value)}
                    ></IonInput>
                  </IonItem>

                  <IonButton
                    className="ion-text-center btn-warning"
                    type="submit"
                    onClick={(e) => {
                      e.preventDefault();
                      updateContact();
                      history.goBack();
                    }}
                  >
                    Save
                  </IonButton>
                </form>
          </IonGrid>
        </IonContent>
      </IonPage>
    </React.Fragment>
  );
};

export default UpdateData;

在“MyContext”中，我为输入设置了状态：

const [phone, setPhone] = useState<string>("");

任何帮助将不胜感激。

【问题讨论】：

错误显示stringLengthInvalid，不一定是null ...也许您的后端不接受空字符串。你确认了吗？
是的，它接受空字符串，const data = { phone: phone || "", }; 解决了这个问题，但是当包含我更新的数据的组件被渲染时，我仍然看到空值只有 1 秒。该字段仅显示 null 1 秒钟，然后消失。它应该什么都不显示。

标签： javascript reactjs ionic-framework frontend

【解决方案1】：

你可以在你评估的地方尝试这样的事情

setPhone(e.detail.value ? e.detail.value : "")

【讨论】：

【解决方案2】：

您的后端应该可以使用默认值正常工作。

    const data = {

          phone: phone || " ",
 
    };

要完全删除 null，请尝试在引号之间放置一个空格。

【讨论】：

在这种情况下，我收到错误：内部服务器错误。 const data = { phone: phone || " ", }; 这有效，但是当我打开组件时，它仅在 1 秒内呈现 null，然后它就消失了。我根本不想看到 null 。这就是我现在面临的问题。

【解决方案3】：

试试这个，它会将默认值设置为电话。

const {
    phone = "",
    setPhone,
  } = React.useContext(AuthContext);

【讨论】：

我已经在 MyContext 中设置了默认值。我是否也需要在组件内添加默认值？

【解决方案4】：

你可以试试这样的：

const data = {
   
      phone: phone || "",
     
    };

【讨论】：

我正要使用三元表达式，例如：phone===null ? " " : phone，但你的方式要好得多。谢谢，它有效。唯一的问题是，当在另一个组件中呈现空字段时，仅 1 秒钟我可以在字段中看到 null，然后它就消失了。我根本不想看到 null 。你知道如何避免这种情况吗？我希望你明白我想说什么。