React报错：Objects are not valid as a React child 排查求助

核心错误原因 #

你遇到的Objects are not valid as a React child (found: object with keys {})报错，根源在于OperatorCard组件的props接收方式错误。

React组件的第一个参数是包含所有传入属性的props对象，而非单独的属性变量。你当前的组件定义直接把ldap和ldapName作为函数参数，导致：

• 第一个参数ldap实际接收的是整个props对象（即{ ldap: item.image, ldapName: item.title }），而非你期望的item.image字符串
• 这种错误的参数处理会触发React渲染对象的逻辑，进而抛出报错

修复步骤 #

修改OperatorCard.js的组件定义，通过解构props对象来获取目标属性：

// OperatorCard.js 修正后的代码
function OperatorCard({ ldap = 'DN270204ABV', ldapName = 'Акулов Богдан Вячеславович' }) {
    const link = ldap; // 此时ldap是传入的item.image字符串

    return ( 
        <div className='testCard'>
          <div className='basicInfoWrap'>
            <div className='basicInfo'>
              <div className='operatorPhoto'><img alt='here must be an image' src={link}/></div>
            </div>
            <div className='nameWrap'>
            <div className='opername'>{ldapName}</div>
            <div className='dur'><p>Длительность смены:</p> <p className='hours'>12ч</p> </div>
            <div className='rait'><p>Рейтинг:</p> <p className='rateValue'>Кращі</p></div>
            </div>
          </div>
          <div className='btnBar'>
            <button className='btnFull'>Повна інформація</button>
          </div>
        </div>
     );
}

export default OperatorCard;

额外优化建议 #

1. 合理初始化state：Content组件中arr的初始值设为[]而非0，更符合数组类型预期，判断加载状态可直接用arr.length > 0：

// Content.js 中state初始化修改
const [arr, setArr] = useState([]);

// 替换原判断逻辑
if(arr.length > 0) {
    // 渲染列表
}

2. 完善加载状态：利用已有的isLoaded状态，在数据未加载完成时显示加载提示：

// Content.js 中的useEffect修改
useEffect(() => {
    fetch('https://fakestoreapi.com/products')
        .then(response => response.json())
        .then(data => {
            setArr(data);
            setIsLoaded(1);
        });
}, []);

// 替换原返回逻辑
if(!isLoaded) {
    return <div className='content'>加载中...</div>;
}

return ( 
    <div className='content'>
        {arr.map(function(item, i){
            return <OperatorCard key={i} ldap={item.image} ldapName={item.title}/>
        })}
    </div> 
);

3. 添加key属性：在map渲染组件时添加唯一key属性，符合React列表渲染最佳实践，避免性能问题和警告。

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