ReactJS嵌套对象属性访问及中间Div默认激活问题排查

核心问题出在状态结构设计、参数传递逻辑、默认值设置这三个环节，导致激活功能完全失效，下面是针对性修复步骤：

1. 修正状态定义与默认值 #

你不需要用嵌套数组的复杂状态，直接存储当前选中卡片的id或索引即可，同时默认设置为中间卡片（5个卡片的中间项是第3个，若用索引则为2，若用自定义id则为对应数值）。

错误状态示例（大概率是这种结构导致的undefined）：

const [selected, setSelected] = useState([{ cardData: { id: undefined } }]);

修正后的状态：

// 示例：用卡片自定义id，中间卡片id为3；若用索引则写2
const [selectedId, setSelectedId] = useState(3);

2. 修复激活函数的参数传递 #

之前激活函数接收的id为undefined，是因为渲染卡片时没正确传递参数。

错误写法：

<div onClick={handleActivate}>{/* 卡片内容 */}</div>

正确写法（遍历卡片时通过箭头函数传递id/索引）：

{cards.map((card) => (
  <div 
    key={card.id}
    onClick={() => handleActivate(card.id)} // 正确传递卡片id
    className={selectedId === card.id ? 'active-card' : 'normal-card'}
  >
    <h3>{card.title}</h3>
    {/* 激活时才显示段落 */}
    {selectedId === card.id && <p>{card.description}</p>}
  </div>
))}

对应激活函数简化：

const handleActivate = (id) => {
  setSelectedId(id); // 直接设置选中的id，不会触发报错
};

3. 修正条件CSS的对比逻辑 #

之前selected.cardData.id === index的对比无效，是因为selected.cardData.id为undefined，现在改成selectedId === card.id（或索引对比）即可正常生效。

示例CSS（可按需调整尺寸样式）：

.normal-card {
  width: 200px;
  height: 150px;
  padding: 1rem;
  border: 1px solid #eee;
  cursor: pointer;
  transition: all 0.3s;
}

.active-card {
  width: 250px;
  height: 200px;
  padding: 1.5rem;
  border-color: #2196F3;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

完整可运行示例 #

import { useState } from 'react';

const CardContainer = () => {
  // 模拟5个卡片数据
  const cards = [
    { id: 1, title: '卡片1', description: '卡片1的详细描述内容' },
    { id: 2, title: '卡片2', description: '卡片2的详细描述内容' },
    { id: 3, title: '卡片3', description: '卡片3的详细描述内容' }, // 中间卡片
    { id: 4, title: '卡片4', description: '卡片4的详细描述内容' },
    { id: 5, title: '卡片5', description: '卡片5的详细描述内容' },
  ];

  // 默认选中中间卡片（id为3）
  const [selectedId, setSelectedId] = useState(3);

  const handleActivate = (cardId) => {
    setSelectedId(cardId);
  };

  return (
    <div style={{ display: 'flex', gap: '1rem', justifyContent: 'center', padding: '2rem' }}>
      {cards.map((card) => (
        <div
          key={card.id}
          onClick={() => handleActivate(card.id)}
          className={selectedId === card.id ? 'active-card' : 'normal-card'}
        >
          <h3>{card.title}</h3>
          {selectedId === card.id && <p>{card.description}</p>}
        </div>
      ))}
    </div>
  );
};

export default CardContainer;

关键总结 #

• 状态设计要贴合需求：不需要嵌套结构，直接存选中标识（id/索引）更高效
• 参数传递必须明确：用箭头函数传递参数，避免出现undefined
• 条件判断要保证类型一致：对比的两边必须是同类型值（比如都是数值id）

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