我无法在前端通过括号表示法访问数组的元素，但它在后端有效答案

【问题标题】：I can't access the elements of an array via bracket notation in the frontend but it works in the backend我无法在前端通过括号表示法访问数组的元素，但它在后端有效
【发布时间】：2023-01-31 04:05:34
【问题描述】：

我是编码新手，遇到了一个非常奇怪的问题。后端有一个来自数据库的数组，我想通过括号表示法访问前端数组的单个元素。我可以在后端访问数组的单个元素。但是在前端，当我尝试访问元素时收到一条错误消息。

这是我的项目 GitHub 回购：https://github.com/LittleWing85/Homepage_For_A_Friend 你可以在这里看到网站：https://website-for-portfolio.herokuapp.com/

在 /client/src/modules/Project.js 中，我从后端检索一个包含数据的对象，并将该对象存储在一个名为 project 的变量中：

export default function Project() {
    const dispatch = useDispatch();
    const projectId = useSelector((state) => state.portfolio.projectId);
    const [project, setProject] = useState({});

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

该对象具有键为gallery_pictures 的属性，其值是一个数组。使用这段代码，我试图显示该数组的第一个元素：

return (
        <div className="content">
            ...
            <p>{project.gallery_pictures[0]}</p>

在浏览器的控制台中，我收到错误消息 project.gallery_pictures is undefined：

screenshot of error message

但是如果我把代码<p>{project.gallery_pictures[0]}</p>改成<p>{project.gallery_pictures}</p>，就会显示数组的内容：

screenshot of displayed content from array

出于这个原因，我不明白为什么控制台说 project.gallery_pictures 未定义。

我尝试在 /server/server.js 的后端控制台中使用此代码中的相同方法访问此数组的元素并且它工作正常：

const express = require("express");
...
app.get("/api/project/:id", (request, response) => {
getProjectDataById(request.params.id).then((result) => {
response.json(result);
console.log(Array.isArray(result.gallery_pictures));
console.log(result.gallery_pictures[0]);
>     });
> });

screenshot of working code in backend

我没有得到什么？为什么我不能在前端访问数组的元素？

【问题讨论】：

作为调试提示：如果在返回语句中使用它之前添加 console.log('project', project)，您将看到它实际使用的值。我的猜测是它被渲染了多次，最初使用项目作为{}，之后使用预期数据

标签： javascript reactjs arrays components

【解决方案1】：

在 useEffect 中，您从服务器获取数据，并在收到响应后立即将项目设置为接收到的数据。然而，在等待服务器响应时项目仍然是初始值{}，因此project.gallery_pictures仍然是未定义的。

作为解决方案，您可以添加一个条件来检查项目是否仍未定义，如果是，则呈现一个加载屏幕。

【讨论】：

谢谢您的回答:-) 我仍然很困惑。 project.gallery_pictures 的元素显示，而如果我将代码更改为 project.gallery_pictures[0]，我会收到一条错误消息。这就是为什么我认为响应已经到达？我错了吗？如果响应尚未到达，怎么可能显示project.gallery_pictures 的元素？
因为它会渲染多次。一旦没有它（如此之快以至于您可能没有注意到）并且在接收到数据时再次（使用新值调用setProject会触发重新渲染）。如果您想检查是否是这种情况，请参阅我对您的问题的评论
太感谢了！！！！

【解决方案2】：

发生这种情况是因为在您的组件尝试呈现自身时请求尚未完成。在你的组件中添加一个条件就可以了

{project?.gallery_pictures !== undefined && Array.isArray(project.gallery_pictures) ? project.gallery_pictures[0] : null}

【讨论】：

万分感谢！！！