Javascript 如何使用数组映射在单个div/行中渲染数组的两个元素？

我们的想法是从数组

foods

中提取两个元素，并在

foods.map

运行时将它们插入到一个div中

以下是我一直在研究的代码：

import React, { useMemo } from 'react';

import { Container } from './styles';

const foods = [
  'batata-palha',
  'batata palito',
  'batata assada',
  'batata frita',
  'batata-cozida',
  'batata batata',
];

const Dashboard: React.FC = () => {
  const automaticHtml = useMemo(() => {
    return foods.map((food, index) => (
      <>
        {/* {index % 2 === 0 && <div>} */}
        {index % 2 === 0 && <p>test</p>}
        <div>
          <p>{food}</p>
        </div>
        {/* {index % 2 !== 0 && </div>} */}
      </>
    ));
  }, []);

  return (
    <>
      <Container>
        <h1>Hello World</h1>
        <p>Template</p>
        <br />
        <br />
        {automaticHtml}
      </Container>
    </>
  );
};
export default Dashboard;

import React，{usemo}来自“React”；
从“./styles”导入{Container}；
常量食品=[
“巴塔塔帕哈”，
“巴塔塔·帕里托”，
“巴塔塔·阿萨达”，
“巴塔塔弗里塔”，
“巴塔塔·科齐达”，
“巴塔塔巴塔”，
];
const仪表板：React.FC=（）=>{
const automaticHtml=useMoom（（）=>{
返回食物。地图（（食物，索引）=>(
{/*{索引%2===0&&}*/}
{索引%2==0&test
}
{食物}

{/*{索引%2！==0&&}*/}
));
}, []);
返回(
你好，世界
模板





{automaticHtml}
);
};
导出默认仪表板；

为什么，如果我从代码中删除注释-

{/*{index%2===0&&}*/}

和

{/*{index%2！==0&&}*/}

，那么它就不起作用了

我怎样才能修好它？我只想在一个div中插入数组的两个元素

---

此处已满。

最简单的方法是通过迭代旧数组来创建新数组，例如，使用：

现在，您可以使用

贴图轻松渲染它：

const automaticHtml = useMemo(() => {
  return newFoods.map(item => (
    <div key={item.join()}>
      {item[0]}, {item[1]}
    </div>
  ));
}, []);

const automaticHtml=useMoom（（）=>{
返回newFoods.map（项目=>(
{item[0]}，{item[1]}
));
}, []);

const automaticHtml = useMemo(() => {
  return newFoods.map(item => (
    <div key={item.join()}>
      {item[0]}, {item[1]}
    </div>
  ));
}, []);