类型错误：无法读取空 React 的属性'forEach'

Question

我正在从dummyapi获取用户。我想列出组件中的每个用户，然后我尝试用forEach来console.log每个用户，但它会抛出错误："；TypeError:无法读取null的属性"forEach"；。我在开始时将users值设置为null。获取数据后，我更改了users值。当iconsole.log它时，用户首先为null，然后它显示数据。我想首先当用户为null时，它会进入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

u可以在用户对象后面打问号，这样你就可以检查用户是否是aready存在

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

})；

Answer 2

在useEffect挂钩中运行forEach循环：

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

只有当users的值发生变化时，此useEffect挂钩才会运行。

Answer 3

您可以在映射用户时先添加一个复选框，例如：

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

一个更干净、更可测试的案例：

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

1. 您需要初始化您的用户状态，如：
   const [users, setUsers] = useState([]);
2. 在检查用户时，您需要检查用户数组的长度是否正确users.length>0&amp；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检查。