使用 useEffect 调用 API。 当尝试映射用户时，它说 TypeError: Cannot read property 'map' of undefined

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，其默认值为空数组。 在 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

如果您将空数组检查为“用户&&”，它仍然会为真。

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

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

Answer 4

如您所见，您获取的 api 与 Array Name: 结果。 这是链接：- https://randomuser.me/api/?results=10所以您将用户设置为 data.results。 然后访问 user.results.map，这是错误的，因为您在用户中没有结果，用户值等于 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>