Question

我正在从 dummyapi 获取用户。我想在我尝试使用 console.log forEach 每个用户之前列出组件中的每个用户，但它抛出该错误：“TypeError：无法读取 null 的属性 'forEach'”。我在开始时将用户值设置为 null。获取数据后，我更改了用户值。当我 console.log 它时，用户首先为空，然后显示数据。我想首先当用户为空时它会进入 foreach 循环，因此它会引发错误。我试过了，但没有用。

{ users !== null && users.forEach(user => {
  console.log(user);
})}

这是我的代码：

import { useEffect, useState } from "react";
import "../styles/App.css";
import Header from "../components/Header";
import User from "./User";
import axios from "axios";

function App() {
  const BASE_URL = "https://dummyapi.io/data/api";

  const [users, setUsers] = useState(null);

  useEffect(() => {
    async function fetchData() {
      try {
        const response = await axios.get(`${BASE_URL}/user?limit=15`, {
          headers: { "app-id": APP_ID },
        });
        setUsers(response.data);
      } catch (error) {
        console.log(error);
      }
    }
    fetchData();
  }, []);

  users.forEach((user) => {
    console.log(user);
  });

  return (
    <>
      <Header />
      <div className="filter">
        <h3 className="filter__title">USER LIST</h3>
        <div>
          <input type="text" placeholder="Search by name" />
        </div>
      </div>
    </>
  );
}

export default App;

Answer 1

你可以像这样在用户对象后面加上问号，这样你就可以检查用户是否有空存在

users?.forEach((user) => {
console.log(user);

});

Answer 2

在 forEach 钩子内运行您的 useEffect 循环：

useEffect(() => {
  users && users.length && users.forEach((user) => {
    console.log(user);
  });
}, [users]);

这个 useEffect 钩子只会在 users 的值改变时运行。

Answer 3

您可以在映射用户时先添加一个检查，例如：

users && users.forEach((user) => {
    console.log(user);
  });

更简洁、更可测试的案例：

<块引用>

注意：您也可以将函数包装在 useCallback 函数中，以避免在 URL 未更改时调用它。

<块引用>

你需要像这样初始化你的用户状态：
const [users, setUsers] = useState([]);
检查用户时需要检查用户数组的长度是否合适 users.length > 0 && users.forEach(user => {
// 你的逻辑
}) 或使用 isEmpty() 或 lodash

ramda

const fetchData = async (url) => {
    const response = await axios.get(`${url}/user?limit=15`, {
      headers: { "app-id": APP_ID }
    });

    const responseData = await response?.data?.data;

    if (responseData) {
      setUsers(responseData);
    }
  };

  useEffect(() => {
    fetchData(BASE_URL);
  }, []);

Answer 4

您可以使用的另一种方法是将初始值设置为空数组 [] 而不是 null。

  const [users, setUsers] = useState([]);

这样即使调用数组函数也不需要空检查。

类型错误：无法读取 null React 的属性“forEach”

4 个答案:

更简洁、更可测试的案例：