React - 渲染对象数组时，对象作为 React 子对象无效

Question

编辑：

我在 React 项目中遇到一个问题，我尝试使用 map 函数渲染对象数组，并且收到以下错误：对象作为 React 子对象无效（发现：带有键的对象{}）。如果您打算渲染子集合，请改用数组。 如果您打算渲染子集合，请改用数组。

我检查了我的代码，我相信我的组件结构和传递的数据是正确的。以下是我的代码的相关部分：

// App.js: 

const fetchItems = async () => {
  try {
    const { data } = await axios.get('/api/items/');
    setItems(data);
    console.log(data);
  } catch (error) {
    console.error('Error fetching items:', error.message);
    console.error(error);
  }
  console.log(items);
}
fetchItems();
}, []);


const handleOnClick = (e) => {
     e.preventDefault();
     const filteredItems = getFilteredItems(items, query);
     setItems(filteredItems);
    };

return (
  <div className='container'>
    <NavigationBar
      handleOnChange={handleOnChange}
      cartitemcount={cartitemcount}
      handleOnClick={handleOnClick}
    />
    <Items items={items} />
  </div>
);







// Items.js: 

function Items({ items }) {
  return (
<ul className="imagegallery">
{items.map(item => (
<div className="item-container" key={item.id}>
<img
className='item-image'
src={item.image}
alt="Item"
/>
<p className='item-name'>{item.product_name}</p>
<button className="item-price">Buy Now{item.price}$</button><p 
className="item-description">{item.description}</p>
</div>
))}
 </ul>
 );
}

export default Items;

我已经确认我的项目数组中的对象格式正确，这是我的数据库中的内容的示例：

[ { "_id": "655b5295f2b8973f21e9a676", "product_name": "Dell XPS 13 Laptop", "price": 1299, "description": "Experience powerful performance in a sleek design with the Dell XPS 13 Laptop. This ultrabook features a virtually borderless InfinityEdge display and delivers reliable computing for on-the-go professionals.", "image": "https://m.media-amazon.com/images/I/81o2W1xNpzL._AC_SX679_.jpg" }, // ... (other items) ]

我已经尝试解构 Items 组件中的 items 属性，但仍然收到错误。 我知道我不能直接传递数组或对象，但我确实析构了它错误：

对象作为 React 子对象无效（找到：带有键 {} 的对象）。如果您打算渲染子集合，请改用数组。 在 throwOnInvalidObjectType (http://localhost:3000/static/js/bundle.js:28898:13) // ...（其他错误详细信息）

我正在为我的电子商务项目构建一个搜索栏，任何有关解决此问题的指导或建议将不胜感激。

谢谢！

Answer 1

React 不允许您直接在 ui 中显示对象/数组。

有 2 种方法可以做到这一点。

1. 单独访问每个键。

const data = [
  { id: 1, product_name: 'First', price: 100, description: 'Description 1' },
  { id: 2, product_name: 'Second', price: 200, description: 'Description 2' },
  { id: 3, product_name: 'Third', price: 300, description: 'Description 3' },
];

export default function App() {
  return (
    <div className="App">
      {data.map(dataItem => (
        <div key={dataItem.id}>
          <div>Name: {dataItem.product_name}</div>
          <div>Price: {dataItem.price}</div>
          <div>Description: {dataItem.description}</div>
        </div>
      ))}
    </div>
  );
}

请注意，我们不是直接显示

dataItem

，而是定义需要在何处显示它的哪些键。

2. 或者，您可以将其转换为字符串。 但它看起来不太好，并且可能在您的项目中无法接受。

{data.map(dataItem => (
  <div key={dataItem.id}>
    {JSON.stringify(dataItem)}
  </div>
 ))}