Question

始终出现TypeError：尝试加载我的页面时，无法读取未定义的属性“ 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是否存在。

有两种情况：

它存在：我们返回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的默认值，则它可以是没有任何内容的纯对象{}。

TypeError：无法在React上读取未定义的属性'title'

1 个答案: