TypeError: Cannot read property 'title' of undefined on React

Question

在尝试加载我的页面时，始终出现 TypeError: Cannot read 属性 'title' of undefined。我确定它与我的道具有关，但无法弄清楚我做错了什么。

我已经尝试遍历每一个道具并对其进行编辑，但我在下一个 "person title" 之后继续遇到同样的错误。

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.

Answer 1

您实际需要做的是检查 props.person 它是否存在。

有两种情况：

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

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

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
      }
  );
 };

在我提供的代码中，如果需要，return 一个加载组件，而不是 null。

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

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

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

TypeError: Cannot read property 'title' of undefined on React

TypeError: Cannot read property 'title' of undefined on React

mapping

jsx

reactjs

react-props