TypeError：无法读取 React 上未定义的属性“标题”答案

【问题标题】：TypeError: Cannot read property 'title' of undefined on ReactTypeError：无法读取 React 上未定义的属性“标题”
【发布时间】：2019-12-05 06:16:00
【问题描述】：

始终收到 TypeError：尝试加载我的页面时无法读取未定义的属性“标题”。我确定它与我的道具有关，但无法弄清楚我做错了什么。

我已经尝试过检查每个道具并对其进行编辑，但我继续在之后的下一个“人名”中遇到同样的错误。

import React from "react";

 const Personcard = props => {
const handleUpdate = () => {
props.handleEdit(props.person.id);
};

return (
<div className="container">
  <div className="containerUsers">
    <div className="card">
      <img
        // src={props.person.primaryImage.imagineUrl}
        id="primaryImageUsers"
        alt=""
      />

      <div className="card-body">
        <div className="card-title">
          <h2>
            {props.person.title === "Mr" && (
              <span id="titleUsers"> {props.person.title}</span>
            )}
          </h2>
        </div>
      </div>
      <div className="card-text">
        <h4>
          <span id="headlineUsers" value={props.person.headline}>
            {" "}
          </span>
        </h4>
        <p>
          <span id="summaryUsers" value={props.person.summary}>
            {" "}
          </span>
        </p>
        <p>
          <span value={props.person.skills}> </span>
        </p>
      </div>

      <button
        type="button"
        className="btn btn-warning"
        onClick={handleUpdate}
      >
        {" "}
        Update{" "}
      </button>

      <button type="button" className="btn btn-danger">
        Delete
      </button>
    </div>
  </div>
</div>
  );
 };


My goal is to display registered users on a homepage.

【问题讨论】：

你能把代码贴在你渲染<Personcard>的地方吗？很高兴看到您在 person 属性中的传递方式。
控制台日志 props 并检查 person.title 是否存在

标签： reactjs mapping jsx react-props

【解决方案1】：

你真正需要做的是检查props.person是否存在。

有两种情况：

存在：我们返回containerUsers。
它没有：我们返回一个加载组件。

我们可以检查它，因为 props.person ? true:false、true 将是我们返回 containerUsers、false 的地方，我们将在其中返回加载组件。

import React from "react";

const Personcard = props => {
  const handleUpdate = () => {
  props.handleEdit(props.person.id);
  };

  return (andleUpdate = () => {
  props.handleEdit(props.person.id);
  };

  return (
    <div className="container">
      {
        props.person ? (
          <div className="containerUsers">
            <div className="card">
              <img
                // src={props.person.primaryImage.imagineUrl}
                id="primaryImageUsers"
                alt=""
              />

              <div className="card-body">
                <div className="card-title">
                  <h2>
                    {props.person.title === "Mr" && (
                      <span id="titleUsers"> {props.person.title}</span>
                    )}
                  </h2>
                </div>
              </div>
              <div className="card-text">
                <h4>
                  <span id="headlineUsers" value={props.person.headline}>
                    {" "}
                  </span>
                </h4>
                <p>
                  <span id="summaryUsers" value={props.person.summary}>
                    {" "}
                  </span>
                </p>
                <p>
                  <span value={props.person.skills}> </span>
                </p>
              </div>

              <button
                type="button"
                className="btn btn-warning"
                onClick={handleUpdate}
              >
                {" "}
                Update{" "}
              </button>

              <button type="button" className="btn btn-danger">
                Delete
              </button>
            </div>
          </div>
        </div>
        ) : null
      }
  );
 };

在我提供的代码中，如果需要，可以返回加载组件，而不是 null。

这是return 函数的最后一行。应该是：( <Loading /> ) 例如。

所以，我这样做是因为，person 没有在组件的第一次挂载时定义，这就是我们检查它的原因。

目前这将解决问题，但我更喜欢从父组件传递props.person 的默认值，它可以是一个普通对象{}，没有它就什么都没有。

【讨论】：