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：无法读取未定义的属性“ firstName”-在反应中使用“ props”

那么，有什么主意我可以优雅地解决这个问题吗？

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>

Answer 2

正如评论中的Chris Cousins said一样，default props是另一种选择：

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

TypeError：无法读取未定义的属性“ firstName”-在react

2 个答案: