React表单用短路运算设默认值时出现undefined报错如何解决？

问题描述 #

我正在创建一个可在两个页面复用的表单组件，希望判断值是否已定义，已定义则使用该值，否则设为空字符串，但使用短路运算或三元运算符均无效。

代码如下：

import { useNavigate } from "react-router-dom";

import classes from "./EventForm.module.css";

function EventForm({ method, event }) {
  const navigate = useNavigate();
  function cancelHandler() {
    navigate("..");
  }

  return (
    <form className={classes.form}>
      <p>
        <label htmlFor="title">Title</label>
        <input
          id="title"
          type="text"
          name="title"
          required
          defaultValue={event.title || ""} // this line 
        />
      </p>
      <p>
        <label htmlFor="image">Image</label>
        <input
          id="image"
          type="url"
          name="image"
          required
          defaultValue={event.image || ""}
        />
      </p>
      <p>
        <label htmlFor="date">Date</label>
        <input
          id="date"
          type="date"
          name="date"
          required
          defaultValue={event.date || ""}
        />
      </p>
      <p>
        <label htmlFor="description">Description</label>
        <textarea
          id="description"
          name="description"
          rows="5"
          required
          defaultValue={event.description || ""}
        />
      </p>
      <div className={classes.actions}>
        <button type="button" onClick={cancelHandler}>
          Cancel
        </button>
        <button>Save</button>
      </div>
    </form>
  );
}

export default EventForm;

出现报错：Cannot read properties of undefined (reading 'title')，尝试了三元运算符和短路运算都失败了。

解决方案 #

问题核心是**event 本身可能为 undefined**——当组件未传入event参数时，直接访问event.title会触发读取未定义属性的错误，之前的短路运算仅处理了属性值为空的情况，未处理event不存在的场景。

方法1：使用可选链+空值合并运算符 #

将每个defaultValue的取值逻辑修改为：

defaultValue={event?.title ?? ""}

• event?.title：仅当event存在时才访问title，否则返回undefined
• ?? ""：若前面的值为undefined或null，则替换为空字符串

方法2：给event设置默认空对象 #

在组件参数声明时，为event指定默认值为空对象，确保即使未传入参数，也能安全访问属性：

function EventForm({ method, event = {} }) {
  // 其余代码不变
}

之后原有的event.title || ""写法即可正常工作，因为event至少是一个空对象，不会是undefined。

完整修改示例 #

结合两种方法，既保证event不会为undefined，又能精准处理属性值为空的情况：

import { useNavigate } from "react-router-dom";
import classes from "./EventForm.module.css";

function EventForm({ method, event = {} }) {
  const navigate = useNavigate();
  function cancelHandler() {
    navigate("..");
  }

  return (
    <form className={classes.form}>
      <p>
        <label htmlFor="title">Title</label>
        <input
          id="title"
          type="text"
          name="title"
          required
          defaultValue={event.title ?? ""}
        />
      </p>
      <p>
        <label htmlFor="image">Image</label>
        <input
          id="image"
          type="url"
          name="image"
          required
          defaultValue={event.image ?? ""}
        />
      </p>
      <p>
        <label htmlFor="date">Date</label>
        <input
          id="date"
          type="date"
          name="date"
          required
          defaultValue={event.date ?? ""}
        />
      </p>
      <p>
        <label htmlFor="description">Description</label>
        <textarea
          id="description"
          name="description"
          rows="5"
          required
          defaultValue={event.description ?? ""}
        />
      </p>
      <div className={classes.actions}>
        <button type="button" onClick={cancelHandler}>
          Cancel
        </button>
        <button>Save</button>
      </div>
    </form>
  );
}

export default EventForm;

内容的提问来源于stack exchange，提问作者kamyarDreamer