Javascript 如何将Ionic React中的空字符串转换为空字符串？

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

{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;

const UpdateData:React.FC=（）=>{
常数{
电话，
设定电话，
}=React.useContext（MyContext）；
const updateContact=（）=>{
常数数据={
电话:电话,，
};
axios
.put（“/xx/update”，数据）
。然后（（响应）=>{
setPhone（response.data.phone）；
返回响应数据；
})
.catch（（错误）=>{
setMessage（“某事物出错了！”）；
setIserror（真）；
});
};
返回(
电话
设置电话（e.detail.value）}
>
{
e、 预防默认值（）；
updateContact（）；
goBack（）；
}}
>
拯救
);
};
导出默认更新数据；

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

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

const[phone，setPhone]=useState（“”）；

---

非常感谢您的帮助。

您可以尝试以下方法：

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

---

您可以尝试以下方法：

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

---

尝试此操作，它会将默认值设置为Phone

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

---

尝试此操作，它会将默认值设置为Phone

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

---

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

    const data = {

          phone: phone || " ",
 
    };

---

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

您的后端应该可以使用默认值

    const data = {

          phone: phone || " ",
 
    };

---

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

您可以在求值时尝试这样做

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

---

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

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

---

错误显示为

stringLengthInvalid

，不一定是

null

。。。可能您的后端不接受空字符串。您确认了吗？是的，它接受空字符串，

const data={phone:phone | | |“”，}解决了这个问题，但在渲染包含更新数据的组件时，我仍然只在1秒内看到空值。该字段仅显示空值1秒，然后消失。它应该什么也不显示。错误为
stringLengthInvalid
，不一定是
null
。。。可能您的后端不接受空字符串。您确认了吗？是的，它接受空字符串，
const data={phone:phone | | |“”，}解决了这个问题，但在渲染包含更新数据的组件时，我仍然只在1秒内看到空值。该字段仅显示空值1秒，然后消失。它应该什么也不显示。我正要使用三元表达式，比如：
phone===null？“”：电话
，但你的方式要好得多。谢谢，它很有效。唯一的问题是，当在另一个组件中呈现空字段时，仅1秒钟我就可以在字段中看到null，然后它就会消失。我根本不想看到空值。你知道如何避免这种情况吗？我希望你明白我想说的。我正要使用三元表达式，比如：
phone===null？“”：电话
，但你的方式要好得多。谢谢，它很有效。唯一的问题是，当在另一个组件中呈现空字段时，仅1秒钟我就可以在字段中看到null，然后它就会消失。我根本不想看到空值。你知道如何避免这种情况吗？我希望你明白我想说的。我已经在MyContext中设置了默认值。我是否也需要在组件中添加默认值？我已经在MyContext中设置了默认值。我是否也需要在组件中添加默认值？在这种情况下，我会得到错误：InternalServerError<代码>常量数据={phone:phone | |“”，}这可以工作，但是当我打开组件时，它仅在1秒内呈现null，然后它就会出现。我根本不想看到空值。这就是我现在面临的问题。在这种情况下，我得到了错误：内部服务器错误<代码>常量数据={phone:phone | |“”，}这可以工作，但是当我打开组件时，它仅在1秒内呈现null，然后它就会出现。我根本不想看到空值。这就是我现在面临的问题。