Javascript TypeError:无法读取属性'；名字'；未定义的-使用'；道具'；反应

我目前正在学习React，遇到了一个问题

我检索与文档相关的JSON信息列表，然后将

JSON

作为

props

传递到以下

const

：

const Document = props => {
  console.log(JSON.stringify(props));
  return(
    <div className="row">
      <div className="col-3">{props.dateOnLetter}</div>
      <div className="col-1">{props.personFrom.firstName}</div>
      <div className="col-1">{props.personFrom.lastName}</div>
      <div className="col-1">{props.personTo.firstName}</div>
      <div className="col-1">{props.personTo.lastName}</div>
    </div>
  );
};

它抱怨persono属性不存在；然而，我想包含它的原因是它可能存在于某些行中

它抱怨这条线路：

<div className="col-1">{props.personTo.firstName}</div>

{props.persono.firstName}

错误是：

TypeError:无法读取未定义的属性“firstName”-在react中使用“props”

---

那么，你知道我如何优雅地解决这个问题吗？

你需要防止它不存在。有几种方法可以做到这一点。例如，条件运算符：

<div className="col-1">{props.personTo ? props.personTo.firstName : ""}</div>
<div className="col-1">{props.personTo ? props.personTo.lastName : ""}</div>

{props.persono？props.persono.firstName:}
{props.persono？props.persono.lastName:}

实例：

const Document=props=>{
log（JSON.stringify（props））；
返回(
{props.dateOnLetter}
{props.personFrom.firstName}
{props.personFrom.lastName}
{props.persono？props.persono.firstName:}
{props.persono？props.persono.lastName:}
);
};
ReactDOM.render(
,
document.getElementById（“根”）
);

在注释中，还有另一个选项：

Document.defaultProps = {
  personTo: {firstName: "", lastName: ""}
};

确保props.persono具有默认设置。@T.J.Crowder感谢您的帮助。。。将接受您的回答，但必须等待7分钟：）@ChrisCousins-以上内容是…？是的。不同之处在于，我更喜欢在组件传递道具之前应用默认值，而不是条件渲染逻辑。当我为组件编写测试时，我更喜欢这种方法。@ChrisCousins-Ah！你是说。我以为你指的是在解构中的默认值。：-）在我看来，如果你想发布它，这将是一个很好的答案。
Document.defaultProps = {
  personTo: {firstName: "", lastName: ""}
};