使用 useEffect 调用 API。当尝试映射用户时，它说类型错误：无法读取未定义的属性'map'

Question

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;

我用useEffect调用API。在此之前，我设置了一个带有useState的const，名为user，默认值为空数组。在useEffect中，我使用setUSer()设置用户值。但是当我映射用户时，它给出了一个平均错误消息TypeError: Cannot read property 'map' of undefined;

Answer 1

似乎不太可能同时需要setUser(data.results)和user.results.map-这就像data.results.results.map。我认为你想要user.map，然后你也可以放弃user &&检查，因为.map仍然会在空数组上工作。

Answer 2

对结果进行条件呈现。这是因为api的获取需要时间，在此之前我们的user变量是未定义的。

Answer 3

正如你所看到的，你正在抓取一个带有Array Name: results的api。这是链接:- https://randomuser.me/api/?results=10你将用户设置为数据。结果。然后访问user。results。map，这是错误的因为user里面没有result, user values等于results。values

解决方案:-1-将user.results.map更改为->user.map如下:-

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>

Answer 4

如果你将empty array设置为"user &&"，它仍然会返回true。

尝试从lodash/underscore中检查user.length > 0或isEmpty(user)。

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