使用 useState 和 useEffect 时"TypeError: Cannot read property 'name' of undefined"

Question

我是使用useState和useEffect的新手，我正在尝试从randomuser api获取用户并显示它们。我正在关注文档，我可以看到我的用户数组登录到控制台。

我可以更改什么，以便它不会告诉我"无法读取未定义的属性'名称'"。

将不胜感激。

import axios from "axios";
import { Layout, Loading } from "../components";
// import config from '../config.json';
const Overview = () => {
const [loading, setLoading] = useState(true);
const [searchQuery, setSearchQuery] = useState("");
const [devices, setDevices] = useState([]);
useEffect(() => {
async function callApi() {
const response = await axios.get("https://randomuser.me/api/?results=10");
const devices = response?.data?.results;
setDevices(devices);
// const response = await axios.get(`${config.serverAPI}/devices`);
// const devices = response?.data?.status === 'success' && response?.data?.devices;
console.log("Devices", devices);
await localStorage.setItem("devices", JSON.stringify(devices));
setLoading(false);
}
callApi();
}, []); // eslint-disable-line react-hooks/exhaustive-deps
return (
<Layout>
<div className="overview-page-wrapper">
{loading && <Loading />}
<h2>Title</h2>
<div>{devices[0].name.first}</div>
</div>
</Layout>
);
};
export default Overview;

import ReactGA from "react-ga";
import { withRouter } from "react-router";
import Disclaimer from "./Disclaimer";
import Header from "./Header";
import Sidebar from "./Sidebar";
const Layout = ({ children, match }) => {
ReactGA.pageview(match.url);
console.log(111, match.url);
return (
<div className="page-wrapper">
<Sidebar />
<div className="main-section">
<Header />
<div className="content"> {children} </div>{" "}
</div>{" "}
<Disclaimer />
</div>
);
};
export default withRouter(Layout);

Answer 1

问题出在你身上

return (
<Layout>
<div className="overview-page-wrapper">
{loading && <Loading />}
<h2>Title</h2>
<div>{devices[0].name.first}</div>
</div>
</Layout>
);

因为首先调用渲染方法，然后你的useEffect钩子，直到那个时候devices是一个空数组。

devices[0]是undefined

当你做devices[0].name你基本上是在做undefined.name

要克服这个问题，你应该做一些类似的事情

return (
<Layout>
<div className="overview-page-wrapper">
{loading && <Loading />}
<h2>Title</h2>
{devices.length > 0 && (<div>{devices[0].name.first}</div>)}
</div>
</Layout>
);

Answer 2

您正在准备加载状态，但它没有覆盖整个渲染，因此当您访问该属性时，它尚不存在。

要更正它，您可以尝试以下操作：

<div className="overview-page-wrapper">
{loading ? 
<div>loading...</div> 
: 
<>
<h2>Title</h2>
<div>{devices[0].name.first}</div>
</>
}
</div>