如何解决React使用map渲染组件时报错Element type is invalid

错误原因 #

你遇到的报错有两个核心诱因：

1. Mapfun不是合法的React组件
   你在Mapfun.jsx里直接给Mapfun赋值为Sdata.map()返回的JSX元素数组，本质是对象类型，不是React要求的函数/类组件。你在App中用<Mapfun/>调用时，React无法识别这个非组件类型的变量，就抛出了"expected a string/class/function but got object"的错误。
2. App.jsx中未导入Card组件就直接使用
   你在App的返回内容里写了<Card/>，但没有从Cards.jsx导入Card，且单独调用Card没有传入必填的props，就算解决第一个问题也会触发额外报错。

修复方案 #

第一步：修改Mapfun.jsx为合法函数组件 #

把原来的直接赋值map结果改成函数组件，在函数返回值里执行map逻辑：

import React from 'react';
import Card from './Cards';
import Sdata from './Sdata';
// 改为函数组件格式
const Mapfun = () => {
  return Sdata.map((val) => {
    return(
      <Card
        key={val.id}
        imgsrc={val.imgsrc}
        title={val.title}
        sname={val.sname}
        link={val.link}
      />
    );
  });
};

export default Mapfun;

第二步：修改App.jsx，删除多余的Card调用 #

你已经在Mapfun里循环渲染了所有Card，不需要单独写<Card/>，也不用额外导入Card：

import Mapfun from './Mapfun';
function App(){
    return(
        <>
          <Mapfun/>
        </>
    )
}
export default App;

如果确实需要单独渲染一个Card，记得先导入Card组件再传入对应的props即可。

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