如何在 React 中映射对象 [重复]答案

【问题标题】：How to map through objects in React [duplicate]如何在 React 中映射对象 [重复]
【发布时间】：2021-07-21 22:43:12
【问题描述】：

我使用 .map() 函数的方式与其他项目完全相同，但在我目前正在处理的项目中，它向我抛出了这个错误：Error: Objects are not valid as a React child (found: object with keys {id, title}). If you meant to render a collection of children, use an array instead. 这是我的代码（其结构在我提到的其他项目中也有效）：

import React from "react";
import Carousel from "react-elastic-carousel";

const Slider = () => {

  let items = [
    {id: 1, title: 'item #1'},
    {id: 2, title: 'item #2'},
    {id: 3, title: 'item #3'}
]

  return (
    <div>
      <div>
        <Carousel>
          {items.map((item) => (
            <div key={item}>{item}</div>
          ))}
        </Carousel>
      </div>
    </div>
  );
}

export default Slider;

我想知道这是否与我在从外部库导入的组件内部映射这一事实有关。

我也尝试将索引添加到.map(item, index)，但也没有用。

【问题讨论】：

这与您尝试渲染对象（项目是对象）的事实有关。我怀疑它是否适用于其他项目。
尝试搜索错误，对象不是有效的 React 节点（请参阅文档），您确定类似：<div key={item.id}>{item.title}</div>

标签： reactjs react-hooks

【解决方案1】：

因为item 是一个对象。你需要像这样更新：

<div key={item.id}>{item.title}</div>

【讨论】：