不確定為什么會收到“ObjectsarenotvalidasaReactchild”錯誤-有解無憂

react-dom.development.js:14887 未捕獲的錯誤：物件作為 React 子項無效（找到：帶有鍵 {name、img、author、price} 的物件）。如果您打算渲染一組子項，請改用陣列。

import React from "react";
const books = [
  {
    name: "The Psychology of Money",
    img: "https://m.media-amazon.com/images/I/71g2ednj0JL._AC_UY218_.jpg",
    author: "morgan hussel",
    price: "239",
  },
  {
    name: "The Psychology of Money",
    img: "https://m.media-amazon.com/images/I/71g2ednj0JL._AC_UY218_.jpg",
    author: "morgan hussel",
    price: "239",
  },
];


function BookList() {
  return <div>
    <h1>{books.map((book) => {return book})}</h1>
  </div>;
};

export default BookList;

uj5u.com熱心網友回復：

React 不渲染物件，并且在中return book，因為book是一個物件，所以你正在回傳物件。

您想要的是回傳一個字串（例如，return book.name）或將物件屬性包裝在元素中并回傳那些（例如，return <h1>book.name</h1>）。

例子：

function BookList() {
  return <div>
    <h1>{books.map((book) => {return book.name}</h1>
    <hr />
    {books.map((book) => {
      return (
        <div>
          <h1>{book.name}</h1>
          <div>{book.author} - ${book.price}</div>
          <img src={book.img} />
          <hr />
        </div>
      )
    })}
  </div>;
};

演示：

const books = [
  {
    name: "The Psychology of Money",
    img: "https://m.media-amazon.com/images/I/71g2ednj0JL._AC_UY218_.jpg",
    author: "morgan hussel",
    price: "239",
  },
  {
    name: "The Psychology of Money",
    img: "https://m.media-amazon.com/images/I/71g2ednj0JL._AC_UY218_.jpg",
    author: "morgan hussel",
    price: "239",
  },
];


function BookList() {
  return <div>
    Elements:<br />
    {books.map((book) => {
      return (
        <div>
          <h1>{book.name}</h1>
          <div>{book.author} - ${book.price}</div>
          <img src={book.img} />
          <hr />
        </div>
      )
    })}
    <hr />
    Or just strings:<br />
    <h1>{books.map((book) => {return book.name})}</h1>
  </div>;
};


ReactDOM.createRoot(document.getElementById('app')).render(<BookList />);

<script type="text/javascript" src="//unpkg.com/react@18/umd/react.production.min.js"></script>
<script type="text/javascript" src="//unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>

<div id="app"></div>

uj5u.com熱心網友回復：

如果要訪問物件陣列，則無法渲染物件，然后可以執行此操作。

<h1>
{
  books.map((book) => {
    return <div> {book.name} </div>
    })
 }
</h1>

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/522589.html

標籤：反应

上一篇：React中的CurrentTarget和目標問題

下一篇：為什么反應不呈現空格