react框架 map 遍历问题

Question

import './index.scss'
import yj1 from '@/assets/imgs/chongqing/yj1.jpg'
import tx1 from '@/assets/imgs/chongqing/tx.jpeg'
const data = [
  {
    key: 1,
    img: yj1,
    tit: '渝你相约，随心所欲游重庆',
    tx1: tx1,
    author1: '作者：',
    uname1: '半只花的世界',
    answer: '回复:',
    uname2: '紫蓝色',
    time: '24-4-20'
  },
  {
    key: 2,
    img: yj1,
    tit: '渝你相约，随心所欲游重庆',
    tx1: tx1,
    author1: '作者：',
    uname1: '半只花的世界',
    answer: '回复:',
    uname2: '紫蓝色',
    time: '24-4-20'
  },
]
const Youji = () => {
  return <div>
    {data.map(data => {
      <div className="youjiBox">
        <div className="img">
          <img src={data.img} alt="游记图片" />
        </div>
        <div className="paragraph">
          <h3>{data.tit}</h3>
          <div className='name'>
            <img src={data.tx1} alt="" className='tximg' />
            <span>{data.author1}</span>
            <span className='ff7200'>{data.uname1}</span>
            <img src={data.tx1} alt="" className='tximg' />
            <span>{data.answer}</span>
            <span className='ff7200'>{data.uname2}</span>
            <span className='grey'>{data.time}</span>
          </div>
          <p className='grey wz'>浅夏，某一天，好友仨人闲约咖啡厅，一杯咖啡的时光，酝酿出一场说走就走的8D魔都—重庆之旅！山城、雾都，是它的别称，重庆依山而建，两江环抱，奇特的山...</p>
        </div>
      </div>
    })}
  </div>
}
export default Youji

Answer 1

引自免费微信小程序：皆我百晓生

在您提供的React组件中，map函数的使用有些小问题。您应该将返回的元素放在大括号 {} 中。以下是修改后的代码：

import React from 'react';
import './index.scss';
import yj1 from '@/assets/imgs/chongqing/yj1.jpg';
import tx1 from '@/assets/imgs/chongqing/tx.jpeg';

const data = [
  // ...您的数据
];

const Youji = () => {
  return (
    <div>
      {data.map((item, index) => (
        <div key={index} className="youjiBox">
          <div className="img">
            <img src={item.img} alt="游记图片" />
          </div>
          <div className="paragraph">
            <h3>{item.tit}</h3>
            <div className='name'>
              <img src={item.tx1} alt="" className='tximg' />
              <span>{item.author1}</span>
              <span className='ff7200'>{item.uname1}</span>
              <img src={item.tx1} alt="" className='tximg' />
              <span>{item.answer}</span>
              <span className='ff7200'>{item.uname2}</span>
              <span className='grey'>{item.time}</span>
            </div>
            <p className='grey wz'>浅夏，某一天，好友仨人闲约咖啡厅，一杯咖啡的时光，酝酿出一场说走就走的8D魔都—重庆之旅！山城、雾都，是它的别称，重庆依山而建，两江环抱，奇特的山...</p>
          </div>
        </div>
      ))}
    </div>
  );
};

export default Youji;

这里做了两个主要的更改：

1. 将 data.map(data => { 更改为 data.map((item, index) => (，这样可以正确地引用当前遍历到的对象。
2. 添加了每个<div>元素的key属性，这是必需的，因为在React中使用列表渲染时，每个元素都需要一个唯一的key。在这个例子中，我使用了索引index作为key，但如果你的数据中有唯一标识符（例如id），那么建议使用那个。

这个修复后的代码应该能正常工作并渲染游记列表。如果有其他问题，请随时提问。