Javascript 使用useEffect调用API。当试图映射用户时，会显示TypeError:Cannotreadproperty'；地图'；未定义的

我正在使用useffect调用API。在此之前，我已经使用默认值空数组设置了一个名为user的useState常量。在useffect中，我使用setUSer（）设置用户值。但当我映射用户时，它给出了带有消息TypeError的mean error：无法读取未定义的属性“map”

为结果放置条件渲染。这是因为api获取需要时间，并且在此之前，ur

user

变量是未定义的。

似乎不太可能同时需要

setUser（data.results）

和

user.results.map

-这就像

data.results.results.map一样。我认为您需要
user.map
，然后您也可以删除
user&
复选框，因为
.map
仍将在空数组上工作。
如果您将空数组选中为“user&”，它仍将给出true

尝试从lodash/下划线中检查
user.length>0
或
isEmpty（user）

import logo from './logo.svg';
import './App.css';
import { useEffect, useState } from 'react';
import User from './components/User/User';

function App() {
  const [user, setUser] = useState([]);
  useEffect(() => {
    // Create an scoped async function in the hook
    async function loadData() {
      const response = await fetch("https://randomuser.me/api/?results=10");
      const data = await response.json();
      setUser(data.results);
    }

    loadData()
  }, [])

  console.log(user)

  return (
    

    
    <div className="App">
      <ul>
          {

            user && user.results.map(usr => <User user={usr}></User>)
          }
      </ul>
     
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

user.length>0&&user.results&&user.results.map（usr=>）
如您所见，获取一个数组名为results的api。
这是链接：-
因此，您可以将用户设置为data.results。
然后访问user.results.map，这是错误的，因为用户中没有结果，用户值等于results.values
解决方案：-
1-从user.results.map更改为->user.map
这将是怎样的：-

user.length > 0 && user.results && user.results.map(usr => <User user={usr}></User>)

从“/logo.svg”导入徽标；
导入“/App.css”；
从“react”导入{useffect，useState}；
从“./components/User/User”导入用户；
函数App（）{
const[user，setUser]=useState（[]）；
useffect（（）=>{
//在钩子中创建作用域异步函数
异步函数loadData（）{
const response=等待获取（“https://randomuser.me/api/?results=10");
const data=wait response.json（）；
setUser（data.results）；
}
loadData（）
}, [])
console.log（用户）
返回(

{
user&&user.map（usr=>）
}

错误：对象作为React子对象无效（找到：具有键{title，first，last}的对象）。如果要呈现子对象集合，请改用数组。在这样做之后显示。这可能来自
用户
组件吗？我将如何进行条件呈现？
{User.length==0？null:User.results.map（usr=>）}
import logo from './logo.svg';
import './App.css';
import { useEffect, useState } from 'react';
import User from './components/User/User';

function App() {
  const [user, setUser] = useState([]);
  useEffect(() => {
    // Create an scoped async function in the hook
    async function loadData() {
      const response = await fetch("https://randomuser.me/api/?results=10");
      const data = await response.json();
      setUser(data.results);
    }

    loadData()
  }, [])

  console.log(user)

  return (
    

    
    <div className="App">
      <ul>
          {

            user && user.map(usr => <User user={usr}></User>)
          }
      </ul>