在使用useEffect和useState时从state获取未定义

Question

我的问题是有时我的项目状态有时返回未定义。我不知道为什么。正如您所看到的，在useEffect中，我有一个函数，它从对后端服务器的API调用中获取项目数据。然后，这将返回一个项目数组，然后我计划在返回语句的dom中看到它。然而，无论出于何种原因，在初始渲染时，它给了我一个未定义，屏幕变成白色。

奇怪的是，如果我将返回语句更改为只显示一个常规字符串，那么我们写入"hello"例如，保存，然后将其更改回{projects[0].name}，这样就可以工作了。然而，在初始渲染时，我得到一个未捕获的TypeError:不能读取未定义的属性(读取'name');

我将补充说，我正在从控制台的服务器获得304状态，但这是因为数据没有改变，因此如果我记得正确的话，我正在从本地存储接收以前的UI。这不是我的应用程序的其他部分的问题，所以我不知道为什么它会是一个问题在这里。

import { useEffect, useState } from "react";
import { fetchPage } from "./../store/actions"
import { connect } from "react-redux"
/*import { ProjectCard } from "./../components/ProjectCard"*/
import API from './../api/API'
const Projects = ({ fetchPage }) => {
const [projects, setProjects] = useState([])
useEffect(() => {
const getProjectData = async () => {
try {
const { data } = await API.getAllProjects()
setProjects(data.data)
} catch (err) {
console.log(err);
}
}
fetchPage('Projects', "Here are your projects")
getProjectData()
}, [fetchPage])
return (<div>
{projects[0].name}
</div>)
}
export default connect(null, { fetchPage })(Projects);

这是我的应用程序的另一部分，工作方式或多或少相同

const [users, setUsers] = useState([])
useEffect(() => {
const getUserData = async () => {

const { data } = await axios.get('/api/v1/users', {
headers: {
'Content-type': 'application/json'
}
})
setUsers(data.data.data)

}
fetchPage("TEAM", "Here is your team");
getUserData();
}, [fetchPage])

我试图删除操作创建器，我预期没有工作

Answer 1

项目以空数组开始。项目[0]将未定义。那么你不能在undefined上做.name

不是说不会有其他问题，但我想说至少一个好的起点是返回一个三进制，比如projects.length > 0 && ...