无法从render ReactJs返回常量

Question

我有这个组件。如果我执行console.log(保险)，它会显示一个保险对象，但如果我尝试执行console.log(insurance.id)，则会得到cannot read property 'id' of undefined

import React, { Component } from "react";

class EditInsurances extends Component {
  render() {
    const { insurances } = this.props;
    // get from url-route ID
    const insuranceId = this.props.match.params.id;

    const insurance = insurances.find(insurance => insurance.id == insuranceId);

   console.log(insurance.id);  <-error here( but if i do just 'insurance' it works
    return (
      <div>
        <p>Hello</p>
        <p>{insurance.tip}</p>  <-- also error here obv.
      </div>
    );
  }
}

export default EditInsurances

Console.log(保险)：

{id: 4, user_id: 1, tip: "Rovinieta", date_exp: "1977-02-13", date_notif: "1992-07-25", …}


created_at: "2019-03-11 09:49:23"
date_exp: "1977-02-13"
date_notif: "1992-07-25"
id: 4
note: "Et rem ea quia enim id incidunt."
tip: "Rovinieta"
updated_at: "2019-03-11 09:49:23"
user_id: 1
__proto__: Object

要访问对象属性，我应该做些什么？

Answer 1

我猜insurances数组来自异步数据源，当您第一次加载EditInsurances时，该数据仍在加载中。

考虑到这一假设，当第一次呈现EditInsurances组件时，insurances属性要么为空，要么为空。

如果你使用console.log(insurance)，你将得到一个空的控制台输出，然后是另一个带有你的对象的控制台输出。

如果你在第一次渲染时使用了console.log(insurance.id)，它将会出错，insurance.tip也是如此，因为数据还不可用。

您应该只在存在保险的情况下呈现<EditInsurances insurances={...} />，或者通过prop类型的验证使EditInsurances组件更具弹性，并在假定数据正确之前对其进行检查。

Answer 2

另一种可能性

index.js

import React from "react";
import ReactDOM from "react-dom";
import EditInsurances from "./EditInsurances";
import "./styles.css";

function App() {
  const insurances = {
    id: "4",
    user_id: " 1",
    tip: "Rovinieta",
    date_exp: "1977-02-13",
    date_notif: "1992-07-25"
  };
return (
   <div className="App">
      <EditInsurances insurances={insurances} />
   </div>
   );
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

EditInsurances.js

class EditInsurances extends Component {
  render() {
     const { insurances } = this.props;
     // get from url-route ID
     const insuranceId = insurances.id;
     const insurance = Object.keys(insurances).map((item, indx) => {
         if (item[indx].id == insuranceId) {
            return item;
          }
     });

     return (
        <div>
        <p>Hello</p>
        <p>{insurances.tip}</p>
        </div>
     );
  }
}

 export default EditInsurances;

codesandbox exaple