警告：React.createElement：类型无效——需要一个字符串答案

【问题标题】：Warning: React.createElement: type is invalid -- expected a string警告：React.createElement：类型无效——需要一个字符串
【发布时间】：2022-12-12 04:41:53
【问题描述】：

我是 Reactjs 的初学者，我正在做这个小项目，向我展示一个使用 externe Api 的随机用户，但我面临的问题是每次我尝试在App.js 文件。

警告：
警告：React.createElement：类型无效——需要一个字符串（对于内置组件）或类/函数（对于复合组件）但得到：null。

请问我做错了什么？谢谢。

// App.js 

import React, { useState, useEffect } from "react";
import User from "./components/User";

const url = 'https://randomuser.me/api/'

function App(){
const [User, setUser] = useState(null)
const [getRandomUser, setgetRandomUser] = useState(false)

  const fetchData = async()=>{
    const response = await fetch(url);
    const {results} = await response.json();
    const {name: { first : firstName, last: lastName },
    street : {number, name},
    login : { password},
    dob :{age},
    picture : {thumbnail: image},
          email,
        phone } = results[0]
    setUser(  {
      fullName : `${firstName} ${lastName}`,
      Adresse: `${number} ${name}`,
      email: email,
      age: age,
      password: password,
      phone: phone,
      img: image
    } )
   
  }

  useEffect(()=>{
    fetchData();
  },[getRandomUser] )

  return (
  <User/>

  )
  
}

export default App

// User.js

import React from 'react'

function User (){
 return <div>User</div>
}

export default User


// index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

【问题讨论】：

标签： javascript reactjs import react-hooks javascript-import

【解决方案1】：

你有两个同名的变量

import User from "./components/User";

和

const [User, setUser] = useState(null)

只需重命名状态

const [user, setUser] = useState(null)

【讨论】：

【解决方案2】：

你有一个命名冲突。你两者都有

import User from "./components/User";

和

const [User, setUser] = useState(null)

这就是为什么精确的变量名称和遵循标准约定有用的原因之一——既不是组件也不是类的东西可能不应该有以大写字母开头的变量。考虑改为调用状态userData，然后您可以将其作为道具传递给孩子，让孩子根据需要进行解析，例如

const [userData, setUserData] = useState(null)

return (
  <User userData={userData} />
)

function User ({ userData }){
 return <div>User {userData ? userData.fullName : ''}</div>
}```

【讨论】：