使用 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;

I am Calling the API with useEffect. Before that I have set a const with useState named user with a default value of empty array. In useEffect I set user value with setUSer(). But when I am mapping user it is giving mean error with a message TypeError: Cannot read property 'map' of undefined;

Answer 1

Seems unlikely that you'd need both setUser(data.results) and user.results.map - that's like data.results.results.map . I think you want user.map , and then you can drop the user && check too, because .map will still work on the empty array.

Answer 2

put a conditional rendering for the results. this happens because the api fetch takes time and until then ur user variable is undefined.

Answer 3

If you check empty array as "user &&", it'll still give true.

Try to check user.length > 0 or isEmpty(user) from lodash/underscore.

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

Answer 4

as you can see, your fetching an api with Array Name: results. this is the link:- https://randomuser.me/api/?results=10 so your setting the user to be the data.results. and then accessing user.results.map, and thats wrong because you dont have results in user, the user values equal to results.values

solution:- 1- change from user.results.map to -> user.map here how it will be:-

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>