React中数组重命名问题：将favourites数组重命名为data以适配子组件映射需求

看起来你现在的问题是想把从Context拿到的favourites数组，转换成名为data的变量，适配接收data参数的映射组件。先说说你当前代码的小问题，再给你两种简单的实现方式：

你当前代码的问题 #

你写的const [favouriteAnimeArray] = [{favourites}]其实是创建了一个包含单个对象的数组，然后解构取第一个元素，所以favouriteAnimeArray最终是{ favourites: 你的原数组 }，而不是数组本身——这也是控制台日志里结构不符合预期的原因。

正确的实现方式 #

方式1：直接赋值为data变量 #

最直接的做法就是把favourites赋值给data变量，之后直接传这个变量给组件：

const { favourites } = useContext(FavouriteAnimeContext);
// 直接重命名为data
const data = favourites;

// 传给需要data参数的组件
<YourMappingComponent data={data} />

方式2：传参时直接映射（无需额外变量） #

如果不需要单独的data变量，也可以在组件传参的时候直接把favourites作为data的值传递，这样更简洁：

const { favourites } = useContext(FavouriteAnimeContext);

// 直接在传参时指定data为favourites
<YourMappingComponent data={favourites} />

这两种方式都能让你的映射组件拿到名为data的数组，直接进行map遍历操作啦。

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