錯誤：物件作為React子項無效（找到：帶有鍵{}的物件）。如果您打算渲染一組子項，請改用陣列。JS

當我嘗試在用戶的儀表板上呈現組件時，我收到以下錯誤訊息：

錯誤：物件作為 React 子物件無效（發現：物件帶有鍵 {jobTitle、jobDescription、salaryRange、closureDate、onClick、handleDelete}）。如果您打算渲染一組子項，請改用陣列。

我不確定為什么會得到它，因為我正在映射變數。

這是我的代碼：

class MyJobOpenings extends Component {
  state = {
    jobOpenings: [],
  };

  componentDidMount = async () => {
    const { data: jobOpenings } = await getJobOpenings();

    this.setState({ jobOpenings });
  };

  handleClick = () => {
    const application = document.querySelector(".active-application-grid");
    const show = document.querySelector(".show-details");
    const hide = document.querySelector(".hide-details");

    application.classList.toggle("show-content");
    show.classList.toggle("inactive");
    hide.classList.toggle("inactive");
  };

  render() {
    return (
      <div>
        <Helmet>
          <title>Job Seeker | My Job Openings</title>
        </Helmet>
        <Sidenav />
        <div className="my-applications-container">
          <div className="my-applications-header">
            <h1>My Job Openings</h1>
            <Link to="/dashboard/my-job-openings/new">
              <input type="submit" id="new-btn" value="New Job Opening" />
            </Link>
          </div>
          <div className="my-applications">
            {this.state.jobOpenings.map((jobOpening) => (
              <ActiveJobOpening
                key={jobOpening._id}
                jobTitle={jobOpening.title}
                jobDescription={jobOpening.description}
                salaryRange={jobOpening.salary}
                closingDate={jobOpening.closingDate}
                onClick={this.handleClick}
                handleDelete={this.handleDelete}
              />
            ))}
          </div>
        </div>
      </div>
    );
  }
}

當我使用 getJobOpenings() 呼叫服務器時，這是我從服務器得到的回應：

[{
    "_id": "61e937fc8543d6ac4e5b8c7b",
    "title": "Testing 123",
    "description": "This is a job description for a web developer at jobseeker.com. If you would like to apply please email us at.",
    "salary": "$20,000 - $49,999",
    "closingDate": "2022-01-28T00:00:00.000Z",
    "userId": "61e7fbcf04cfba5fd837c578",
    "__v": 0
}, {
    "_id": "61de9433b095d680fd8664be",
    "title": "Web Developer",
    "description": "This is a job description for a web developer. You will be required to produce and maintain a website for jobseeker.com. This description has to be between 100 and 2500 characters.",
    "salary": "$0 - $19,999",
    "closingDate": "2022-02-19T00:00:00.000Z",
    "__v": 0
}]

ActiveJobOpening 組件：

const ActiveJobOpening = (
  jobTitle,
  jobDescription,
  closingDate,
  salaryRange,
  onClick,
  handleDelete
) => {
  return (
    <div className="active-application-container">
      <div className="active-application">
        <div className="active-application-grid">
          <p className="grid-item title">Job Title:</p>
          <p className="grid-item content">{jobTitle}</p>
          <p className="grid-item title">Job Description:</p>
          <p className="grid-item content">{jobDescription}</p>
          <p className="grid-item title">Salary Range:</p>
          <p className="grid-item content">{salaryRange}</p>
          <p className="grid-item title">Closing Date:</p>
          <p className="grid-item content">{closingDate}</p>
        </div>
        <div className="show-details">
          <input type="submit" value="Show More Details" onClick={onClick} />
        </div>
        <div className="hide-details inactive">
          <input type="submit" value="Show Less Details" onClick={onClick} />
        </div>
        <div className="buttons">
          <Link to="/dashboard/my-job-openings/:id">
            <input type="submit" id="edit-btn" value="Edit" />
          </Link>

          <input
            type="submit"
            id="delete-btn"
            value="Delete"
            onClick={handleDelete}
          />
        </div>
      </div>
    </div>
  );
};

有人可以幫我找出問題所在嗎？

uj5u.com熱心網友回復：

您已將所有道具傳遞到jobTitle變數中。

const ActiveJobOpening = (
  jobTitle, // <-- treated as the props object, rest are ignored
  jobDescription,
  closingDate,
  salaryRange,
  onClick,
  handleDelete
) => { .... }

您應該從單個道具物件中解構所有這些。

const ActiveJobOpening = ({
  jobTitle,
  jobDescription,
  closingDate,
  salaryRange,
  onClick,
  handleDelete
}) => { .... }

標籤：

上一篇：如何通過來自另一個組件的onClick打開模態組件

下一篇：如何在Gatsby.js中為GoogleAnalytics添加多個跟蹤ID？