React点击map渲染的列表项展示详情报logo属性未定义如何解决

DevOps 小满

2026-9-26

问题原因与修复方案

核心问题点

点击事件参数冲突：Company组件的onClick回调里，你把事件参数命名为company，覆盖了父组件传入的公司数据变量，实际传入处理函数的是浏览器点击事件对象，不是你需要的公司数据。
选中状态存储缺失：Body组件里的viewCompany仅为布尔值，没有存储用户点击选中的具体公司数据。
详情组件缺传props：你触发显示后渲染的<Company />没有传入任何company属性，组件内读取到的company是undefined，访问company.logo就会抛出你遇到的类型错误。

修复代码

1. 修改Body组件

将状态改为存储选中的公司对象，渲染详情时传入对应数据：

import { useState } from "react";
import CompanyList from "./CompanyList";
import Company from "./Company";

const Body = ({ companies }) => {
  // 初始为null代表未选中任何公司
  const [selectedCompany, setSelectedCompany] = useState(null);
  const showCompanyHandler = (company) => {
    console.log("Clicked on company card", company);
    setSelectedCompany(company);
  };

  return (
    <div className="appBody">
      <CompanyList
        companies={companies}
        showCompanyHandler={showCompanyHandler}
      />
      {/* 仅当存在选中公司时渲染详情，传入对应数据 */}
      {selectedCompany && <Company company={selectedCompany} />}
    </div>
  );
};

export default Body;

2. 修改Company组件

修正点击事件的参数命名，增加可选链判断避免未传点击回调时报错：

const Company = ({ company, showCompanyHandler }) => {
  return (
    <div className="company" onClick={(e) => showCompanyHandler?.(company)}>
      <img src={company.logo} alt="logo" />
      <h1>{company.name}</h1>
      <p>{company.companyDescription}</p>
    </div>
  );
};

export default Company;