javascript - 类型错误 : Cannot read property 'firstName' of undefined - using 'props' in react

Question

我目前正在学习 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>
  );
};

JSON 看起来像这样:

{
    "dateOnLetter":"2012-04-23T18:25:43.511+0000",
    "personFrom":{
        "id":"5b637d319e30ed3f8c322c64",
        "firstName":"Georgexxx",
        "lastName":"TheCatxxx"
    }
}

它提示 personTo 属性不存在；但是我想包含它的原因是它可能存在于某些行中。

它提示这条线:

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

错误是:

TypeError: Cannot read property 'firstName' of undefined - using 'props' in react

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

Answer 1

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

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

实例:

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 ? props.personTo.firstName : ""}</div>
      <div className="col-1">{props.personTo ? props.personTo.lastName : ""}</div>
    </div>
  );
};

ReactDOM.render(
  <Document dateOnLetter="today" personFrom={{firstName: "Joe", lastName: "Bloggs"}} />,
  document.getElementById("root")
);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

另一种选择是在收到时解构您的 props 并为 personTo 属性提供默认值:

const Document = ({dateOnLetter, personFrom, personTo = {firstName: "", lastName: ""}}) => {
  return(
    <div className="row">
      <div className="col-3">{dateOnLetter}</div>
      <div className="col-1">{personFrom.firstName}</div>
      <div className="col-1">{personFrom.lastName}</div>
      <div className="col-1">{personTo.firstName}</div>
      <div className="col-1">{personTo.lastName}</div>
    </div>
  );
};

实例:

const Document = ({dateOnLetter, personFrom, personTo = {firstName: "", lastName: ""}}) => {
  return(
    <div className="row">
      <div className="col-3">{dateOnLetter}</div>
      <div className="col-1">{personFrom.firstName}</div>
      <div className="col-1">{personFrom.lastName}</div>
      <div className="col-1">{personTo.firstName}</div>
      <div className="col-1">{personTo.lastName}</div>
    </div>
  );
};

ReactDOM.render(
  <Document dateOnLetter="today" personFrom={{firstName: "Joe", lastName: "Bloggs"}} />,
  document.getElementById("root")
);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

如果你不想，你不必在参数列表中解构，如果你不想，你也不必解构所有内容:

const Document = props => {
  const {personTo = {firstName: "", lastName: ""}} = 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">{personTo.firstName}</div>
      <div className="col-1">{personTo.lastName}</div>
    </div>
  );
};

实例:

const Document = props => {
  const {personTo = {firstName: "", lastName: ""}} = 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">{personTo.firstName}</div>
      <div className="col-1">{personTo.lastName}</div>
    </div>
  );
};

ReactDOM.render(
  <Document dateOnLetter="today" personFrom={{firstName: "Joe", lastName: "Bloggs"}} />,
  document.getElementById("root")
);

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>