错误：元素类型无效，应为字符串答案

【问题标题】：Error: Element type is invalid expected a string错误：元素类型无效，应为字符串
【发布时间】：2020-03-29 04:50:26
【问题描述】：

我正在使用 ReactJS。

我不知道问题出在哪里。

错误：元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件），但得到：对象。检查App的渲染方法。

const App=()=>{
      const Person=[
         {name:"Liya",age:4},
         {name:"kuru", age:7},
         {name:"belaynesh",age:56}
          ]
    const [currentstate,setStateFn]=useState({Person:Person})
    const incrementAge=()=>{
      let copyOfPerson=[...currentstate.Person];//copy of the person array
        let newstate=copyOfPerson.Person.map((per)=>{
          return {name:per.name,age:per.age+1}
        })
        console.log(newstate)
        setStateFn(newstate)
    }
    return(
      <div>
        {
         currentstate.Person.map((per,index)=>{
           return <Person key={index} name={per.name} age={per.age}></Person>
         })
        }
         <button onClick={()=>{incrementAge()}}>IncrementAge</button>
      </div>

    )
    }
    export default App;

错误是：

 import App from './App';
   5 | import * as serviceWorker from './serviceWorker';
   6 | 
>  7 | ReactDOM.render(
   8 |   <React.StrictMode>
   9 |     <App />
  10 |   </React.StrictMode>,

【问题讨论】：

你的班级人是什么？
有帖子解决了您的问题吗？请提供一些反馈将不胜感激。见What should I do when someone answers my question?

标签： javascript reactjs

【解决方案1】：

您将Person 定义为一个数组 常量数据。

但是您在功能组件的返回中使用它作为 JSX 组件，这导致了您提到的错误。

您可以像下面这样制作Person 组件

const Personal = ({name, age}) => {
  return (
    <div>
      {name}, {age}
    </div>
  )
}

return <Personal key={index} name={per.name} age={per.age} />;

【讨论】：

【解决方案2】：

在你的退货声明中，你有

return(
      <div>
        {
         currentstate.Person.map((per,index)=>{
           return <Person key={index} name={per.name} age={per.age}></Person>
         })
        }
         <button onClick={()=>{incrementAge()}}>IncrementAge</button>
      </div>

    )

对于下一行，

return <Person key={index} name={per.name} age={per.age}></Person>

Person 之前被定义为 array，但在这里你试图将其渲染为 react 组件，因此 React 编译器会报错。

【讨论】：