时间戳

首页 > 解决方案 > 使用 useEffect 调用 API。当尝试映射用户时，它说 TypeError: Cannot read property 'map' of undefined

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

问题描述

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 的平均错误；

标签： javascriptcssreactjsajax

解决方案

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

推荐阅读