React组件报错：TypeError: Cannot read property 'map' of undefined，相同逻辑在另一组件可正常运行

我一眼就看到了你代码里几个关键问题，这应该就是导致错误的根源——虽然另一个组件代码正常，但你这里的细节偏差直接引发了问题：

1. 重复的useEffect与错误的字段赋值 #

你写了两个完全重复的useEffect钩子，都在组件挂载时调用PropertyService.getAllProperties()，而且第二个钩子里错误地尝试访问getData.AllProperties！但第一个钩子你明明用的是data.properties，这明显是字段名不匹配。

接口返回的数据结构是固定的（毕竟另一个组件用相同逻辑能正常运行），所以第二个useEffect会把AllProperties设置成undefined（如果接口返回里根本没有AllProperties这个字段），这时候调用AllProperties.map()自然会抛出"Cannot read properties of undefined"的错误。

修复：删掉重复的useEffect，保留正确的字段赋值

useEffect(()=>{
  PropertyService.getAllProperties().then(data =>{
    setAllProperties(data.properties); // 和另一个组件保持一致的字段名
  });
},[]);

2. 缺少错误捕获逻辑 #

如果PropertyService.getAllProperties()调用失败（比如网络波动、接口报错），你的代码没有任何错误处理，这会导致状态无法正确更新，甚至直接抛出未捕获的Promise错误。

修复：添加catch块处理错误

useEffect(()=>{
  PropertyService.getAllProperties()
    .then(data =>{
      setAllProperties(data.properties);
    })
    .catch(error => {
      console.error('获取房产数据失败:', error);
      // 也可以在这里给用户展示错误提示，比如setMessage('加载失败，请稍后重试')
    });
},[]);

3. 未给子组件传递数据 #

你在map里渲染<PropertyItem key={property._id}/>，但完全没把property数据传给子组件！这样PropertyItem根本拿不到要展示的房产信息，大概率会在子组件内部报错（比如尝试访问undefined的属性）。

修复：把property作为props传递给子组件

{ AllProperties.map((property) =>{
  return <PropertyItem key={property._id} property={property} />
}) }

4. 冗余代码与编码规范优化 #

• map方法后面的,[]是多余的，箭头函数不需要额外指定this指向
• 变量名建议用小驼峰（allProperties而非AllProperties），这是JS/React的通用编码规范，能提升代码可读性

最终修复后的完整代码 #

import React, {useState, useEffect} from 'react'
import PropertyItem from './PropertyItem';
import PropertyService from '../Services/PropertyService';

const Home = props =>{
  const [allProperties, setAllProperties] = useState([]);
  // const [message, setMessage] = useState(null);

  useEffect(()=>{
    PropertyService.getAllProperties()
      .then(data =>{
        setAllProperties(data.properties);
      })
      .catch(error => {
        console.error('加载房产数据出错:', error);
        // setMessage('加载失败，请刷新页面重试');
      });
  },[]);

  return(
    <div>
      <h1>Properties</h1>
      {/* 可以在这里展示错误提示 */}
      {/* {message && <p className="error-text">{message}</p>} */}
      <ul className="">
        {allProperties.map((property) =>{
          return <PropertyItem key={property._id} property={property} />
        })}
      </ul>
      <br/>
    </div>
  );
}

export default Home

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