前端无法通过方括号访问数组元素但后端正常的问题求助

为啥会报错？ #

你前端组件一开始渲染的时候，project的初始值是空对象{}，这时候project.gallery_pictures根本不存在，是undefined。你直接写project.gallery_pictures[0]，相当于在拿undefined的第0个元素，浏览器当然会报错。

而直接输出{project.gallery_pictures}的时候，React在初始渲染时只会显示undefined，等fetch请求拿到数据、project更新后，就会显示数组内容，所以你觉得“能正常显示”。后端没问题是因为后端代码是等数据完全拿到之后才访问数组，不存在这种异步加载的时序差。

怎么解决？ #

给你几个实用的办法：

1. 用可选链（最省事） #

ES6的可选链操作符?.可以帮你规避这种报错，当gallery_pictures不存在时直接返回undefined，不会往下执行：

{project.gallery_pictures?.[0]}

2. 先判断再访问 #

先检查gallery_pictures存在且有内容，再去拿第一个元素：

{project.gallery_pictures && project.gallery_pictures.length > 0 && project.gallery_pictures[0]}

3. 给初始状态加默认数组 #

把project的初始值改成包含空数组的对象，这样一开始gallery_pictures就是空数组，访问[0]只会得到undefined，不会报错：

const [project, setProject] = useState({ gallery_pictures: [] });

4. 加加载状态 #

在数据加载完成前显示加载提示，避免渲染未准备好的数据：

const [loading, setLoading] = useState(true);

useEffect(() => {
    fetch("/api/project/" + projectId)
        .then((response) => response.json())
        .then((data) => {
            setProject(data);
            setLoading(false);
        });
}, [projectId]);

// 加载中就显示提示
if (loading) {
    return <div>加载中...</div>;
}

// 数据就绪后再渲染
return (
    <div>{project.gallery_pictures[0]}</div>
);

内容的提问来源于stack exchange，提问作者LittleWing85