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

Question

我正在使用 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>,

Answer 1

在您的退货声明中，您有

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 之前被定义为一个数组，但在这里你试图将它渲染为一个反应组件，因此反应编译器抱怨。

Answer 2

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

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

您可以制作Person如下所示的组件

const Personal = ({name, age}) => {

  return (

    <div>

      {name}, {age}

    </div>

  )

}

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