React开发问题：map渲染报错及双卡片、双金字塔实现需求

1. 并排显示两个卡片 #

要在React区块内实现两个卡片并排，核心用Flex布局即可。将两个卡片容器包裹在设置了display: flex的父容器中，通过gap控制卡片间距，align-items: stretch保证卡片高度一致。

修改原轮播项结构，让每个轮播项同时承载双语卡片：

<Auto play={true} cancelOnInteraction={false} interval={10000} bullets={false} buttons={false}>
  {/* 假设dataKZ与dataRU长度匹配，按索引对应渲染 */}
  {dataKZ.map((kzVal, idx) => {
    const ruVal = dataRU[idx];
    return (
      <div key={idx} style={{ display: 'flex', gap: '24px', padding: '16px', width: '100%' }}>
        {/* 哈萨克语卡片 */}
        <div style={{ flex: 1, padding: '20px', backgroundColor: '#2a2a2a', borderRadius: '8px' }}>
          <h2 style={{ color: 'white' }}>Аты-жөні: {kzVal?.ret_fio || 'белгілі емес'}</h2>
          <h2 style={{ color: 'white' }}>Билет: {kzVal?.ret_letter_code || 'белгілі емес'}</h2>
          <h2 style={{ color: 'white' }}>Күй: {kzVal?.ret_status_kz || 'белгілі емес'}</h2>
        </div>
        {/* 俄语卡片 */}
        <div style={{ flex: 1, padding: '20px', backgroundColor: '#3a3a3a', borderRadius: '8px' }}>
          <h2 style={{ color: 'white' }}>{ruVal?.ret_fio || 'не указан'}</h2>
          <h2 style={{ color: 'white' }}>{ruVal?.ret_letter_code || 'не указан'}</h2>
          <h2 style={{ color: 'white' }}>{ruVal?.ret_ru_status || 'не указан'}</h2>
        </div>
      </div>
    );
  })}
</Auto>

2. 解决Cannot read properties of undefined (reading 'data-src')错误 #

这个错误是代码尝试访问未定义对象的data-src属性，对应解决办法：

• 过滤空数据项：提前清除数组中的undefined/null元素，避免循环到无效项：

  const validKZ = dataKZ.filter(item => item != null);
  const validRU = dataRU.filter(item => item != null);
  

• 可选链防御访问：在对象属性前加?.，即使属性不存在也不会抛出错误：

  kzVal?.ret_fio || 'белгілі емес'
  

• 添加加载判断：确保数据加载完成后再渲染，避免在空数组状态下执行循环：

  {!validKZ.length || !validRU.length ? (
    <div style={{ color: 'white', padding: '20px' }}>加载中...</div>
  ) : (
    // 轮播内容渲染逻辑
  )}
  

• 检查轮播组件要求：若Auto组件内部依赖data-src属性，确认传入的元素是否符合组件规范，避免传递空的媒体元素。

3. 实现两个金字塔结构 #

用包含两个子数组的数组存储金字塔层级数据，通过嵌套map渲染层级，结合CSS实现金字塔形状：

// 定义两个金字塔的层级数据，子数组代表每一层的元素
const pyramidGroups = [
  // 第一个金字塔：从上到下元素递增
  [1], [2,3], [4,5,6], [7,8,9,10],
  // 第二个金字塔：从上到下元素递减
  [10,9,8,7], [6,5,4], [3,2], [1]
];

// 渲染两个并排的金字塔
<div style={{ display: 'flex', gap: '40px', justifyContent: 'center', padding: '20px' }}>
  {pyramidGroups.map((pyramid, pyIdx) => (
    <div key={pyIdx} style={{ textAlign: 'center' }}>
      {pyramid.map((row, rowIdx) => (
        <div key={rowIdx} style={{ padding: '8px' }}>
          {row.map((num, numIdx) => (
            <span key={numIdx} style={{ 
              display: 'inline-block', 
              width: '32px', 
              height: '32px', 
              lineHeight: '32px', 
              backgroundColor: '#555', 
              color: 'white', 
              borderRadius: '4px', 
              margin: '0 4px' 
            }}>
              {num}
            </span>
          ))}
        </div>
      ))}
    </div>
  ))}
</div>

• 外层flex容器实现两个金字塔并排
• 嵌套map分别遍历金字塔组、层级、元素，灵活控制结构
• 用inline-block和间距实现层级排列，背景色与圆角优化视觉效果

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