如何通过反应中的对象映射

Question

我使用.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)添加一个索引，但这也不起作用。

Answer 1

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

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