Javascript 尝试从对象中解构值将返回错误

我试图使用destructuring从对象获取name属性，但返回的错误是“无法读取未定义的属性名”

    // Get genres for given movie
    getGenres = (genreIds, genres) => {
        return genreIds.map(genreId => {
            const filteredGenres = genres.filter(genre => genre.id === genreId);
            const { name } = filteredGenres[0];
            return name;
        })
    };

如果我使用控制台日志

filteredGenres[0]

返回了一个带有名称和id的有效对象，我还使用

typeof

检查了这一点以确保。结果是：

{id:14，name:“Fantasy”}

如果我尝试控制台log

filteredGenres[0]。name

我也会得到相同的无法读取未定义错误的属性名

我不完全确定我做错了什么？非常感谢您的帮助！：）

我已经按照要求创建了一个stackblitz。有问题的文件是

NowPlaying.js

---

根据Stackblitz示例，state属性

genres

初始化为空数组

这意味着，当您将其作为道具传递给

NowPlaying

时，

filterGenres

也将是一个空数组，因此会出现错误

这只发生在获取流派之前获取

类型

并更新状态后，状态更新，一切看起来都很好

---

您必须说明

类型

数组为空。

您可以分享一个数组示例吗？不相关，但您可能应该使用

。查找
而不是
。过滤器
小心，
过滤器
如果没有与条件匹配的元素，则返回空数组。在这种情况下，
filteredGenres[0]
是
undefined
并且您正在分解
undefined
的一个道具，您是否可以发布类似的可复制样本，以便我们可以看到您正在使用的所有内容？如果
filteredGenres[0]
不是未定义的
，
控制台。log
返回值在
filteredGenres[0]之后怎么可能直接返回值。name
抛出错误？！