reactjs中如何使用map函数和渲染列表

Posted 2023-02-14

【中文标题】reactjs中如何使用map函数和渲染列表

【英文标题】：How to use map function and render list in reactjs

【发布时间】：2022-01-15 18:58:26

【问题描述】：

我试图加载这个数组并使用 map 函数将它呈现为一个表我该怎么做。 数组响应来自useState。

我曾尝试使用列表索引并将数组呈现为表格，但数组会动态更改其列数和行数，因此随着列数和行数不断变化，索引不起作用。

示例图片如下所示：

我尝试过的

 arrayData.map(function (item) 
  return item;
 )

并得到类似的输出

let array = [
    [
14.203298568725586,
5.916393756866455,
15.5038480758667,
15.5038480758667,
15.5038480758667
],
[
20.115657806396484,
7.724868297576904,
19.88268280029297,
19.88268280029297,
19.88268280029297
],
[
14.476829528808594,
6.237934112548828,
13.77694320678711,
13.77694320678711,
13.77694320678711
],
[
14.203298568725586,
5.916393756866455,
15.5038480758667,
15.5038480758667,
15.5038480758667
],
[
14.203298568725586,
5.916393756866455,
15.5038480758667,
15.5038480758667,
15.5038480758667
],
]

【问题讨论】：

是什么决定了左列中未显示在数据中的值？标题和颜色也

左栏是什么意思？如果您在谈论字母，则不需要

颜色以交互方式从 0 变为 100 比例 @charlietfl

是的，我说的是字母。如果不需要，为什么要显示它们？最好是edit 这个问题，所以没有歧义。还请展示您尝试过的内容。 SO 不是免费的代码编写服务。您只需要一个用于行的映射和一个用于单元格的内部映射

@charlietfl 实际上这些字母来自输入字段，我上面显示的数组是输入字段的 rest-api 的输出数组预测。

【参考方案1】：

您的数组名称与您尝试映射的名称不匹配。

所以

let array

应该是：

const arrayData

为：

 arrayData.map((item) => 
  return item;
 )

上班。另请注意，应使用useState 更新数组，因此如果这就是您使用let 的原因。您没有提及您尝试执行的网格的任何其他代码。您是将其传递给map 中的组件还是在循环时构建所有内容？

您还有一个多维数组，所以当您只显示一张地图时，我不确定您的目标是什么。

【讨论】：

使用两个地图函数迭代循环解决了我的问题

还要确保添加key，这样您也不会收到错误消息。