React中如何在单个组件内使用map遍历多个数组

你的代码问题在于直接把map方法传给了组件props，而且只渲染了单个Item，没有实现批量生成。下面是正确的实现方式：

方法一：通过索引关联两个数组（适用于已有分离数组的场景） #

import { useState } from 'react'; // 别忘了导入useState
import Item from './component/Item.js';

function App() {
  const [words, setWords] = useState(['description 1', 'description 2']);
  const [titles, setTitles] = useState(['Fried Chicken', 'Chocolatte']);

  return (
    <div> {/* React要求返回单个根元素，用容器包裹所有Item */}
      {titles.map((title, index) => (
        <Item 
          key={index}  {/* 列表渲染必须加key，帮助React追踪元素 */}
          header={title} 
          description={words[index]}  {/* 通过索引取对应描述 */}
        />
      ))}
    </div>
  );
}

方法二：合并为对象数组（更推荐，数据关联更清晰） #

把标题和描述整合到同一个对象里，避免索引错位的问题：

import { useState } from 'react';
import Item from './component/Item.js';

function App() {
  const [items, setItems] = useState([
    { header: 'Fried Chicken', description: 'description 1' },
    { header: 'Chocolatte', description: 'description 2' }
  ]);

  return (
    <div>
      {items.map((item, index) => (
        <Item 
          key={index} 
          header={item.header} 
          description={item.description} 
        />
      ))}
    </div>
  );
}

关键注意点 #

• 必须调用map方法（arr.map(...)），而不是直接传arr.map（这是传方法本身，不是执行结果）
• 列表渲染的每个组件都需要唯一key属性，这里用索引是简单方案，有唯一ID的话优先用ID
• React组件返回只能有一个根元素，所以要用div或其他容器包裹所有生成的Item

内容的提问来源于stack exchange，提问作者Ububly