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

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

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

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

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