Javascript 从React到Vue，如何使用.map方法循环遍历数组？

我使用的是vue，来自react背景。React将此方法称为.map，如果您将数组作为道具传入，它将根据数组中的项数多次渲染该组件，并从索引中提取每个数据。像这样：

函数应用程序（）{
const classes=useStyles（）；
const[finance，setFinance]=useState（[]）；
useffect（（）=>{
axios
.全部([
axios.get(
`https://cloud.iexapis.com/stable/stock/market/collection/list?collectionName=gainers&token=XXXXXXXXXXXXXXXXXXXXX`
),
])
。然后（（res）=>{
setFinance（res[0]。数据）；
})
.catch（（错误）=>{
控制台日志（err）；
});
}, []);
const cardList=finance.map（（公司，索引）=>(
));

基本上，

finance

是一种存储阵列中所有数据的状态。我将

公司

的数据作为道具传递给

Cards

组件。这很有效，我正在尝试在vue中复制这种效果。到目前为止，我的代码如下：

从“@/components/cards.vue”导入卡；
导出默认值{
数据（）{
返回{
加密：[]
};
},
组件：{cards}，
安装的（）{
这是axios
.得到(
"https://min-api.cryptocompare.com/data/top/totalvolfull?limit=20&tsym=USD&api_key=xxxxxxxxxxxxxxxxxxx"
)
。然后（响应=>{
this.crypto=response.data.data；
日志（response.data.data）；
})
.catch（错误=>console.log（错误））；
}
};

如您所见，

crypto

是我在Vue中的

cards

组件中传递的一个数据属性。我想做的事情与我在React中所做的完全相同，而我将一个对象数组传递到一个组件中，该组件在从中获取数据时根据数组中对象的数量进行多次渲染相应的索引。我尝试过使用v-for指令，但我认为这只适用于列表？非常感谢您的帮助

注: 以下是我的Vue项目上下文卡组件：

{{crypto.CoinInfo.FullName}
{{
crypto.CoinInfo.Name
}}
价格：{{crypto.DISPLAY.USD.Price}}
更改：
{{crypto.DISPLAY.USD.CHANGEDAY}
拯救
检查
导出默认值{
道具：{
加密：对象
}
};

查看

v-for

指令：

尝试匹配您的React示例，您的案例如下：

<v-col v-for="(cryptoItem, index) in crypto" xs="11" sm="6" md="4" lg="3">
  <cards :crypto="cryptoItem" :index="index" />
</v-col>

---

使用Vue CLI生成的项目也可以使用，这使您可以执行与React解决方案类似的操作。这不一定是比使用

v-for

更好的解决方案，但如果您更喜欢JSX，这只是一个可选选项

例如，容器组件可以获取数据，并将结果分配给绑定到

CardList

组件的道具，该组件将道具映射到

卡

组件的数组：

Container.vue：

导出默认值{
异步装入（）{
const{data}=await axios.get（…）
this.crypto=数据
}
}

CardList.vue：

导出默认值{
道具：{
加密：{
类型：数组，
要求：正确，
默认值：（）=>[]，
},
},
render（）{
返回(
{this.crypto.map（crypto=>）}
)
},
};

---

“React将此方法称为.map”-不。

finance

是一个普通数组值，它具有相同的属性。你可以在vue.js中使用它。这部分是正确的，当使用渲染函数而不是

时，你只能在vue的vdom中使用

.map

。我来看看这是否有效。人们提供的大多数示例都只是使用列表，而不是真正的组件。Will give it a shott说“迭代中的自定义元素需要'v-bind:key'啊，明白了。只需要v-bind key。哦，哇，真的吗？该死。我不知道。很好的提示，将来肯定会用到这个。