我正在尝试创建一个表React组件,该组件将接受数据和标题作为道具。我遇到了一个问题,我无法获得 Map 的forEach
方法不会创建必要的子元素。
列的输入属性如下所示:
let cols = {
payment: 'Payment',
date: 'Processing Date',
amount: 'Amount',
payee: 'Payee'
};
这是我的 React 表组件生成标题元素的方法:
generateTableHead() {
let columnsMap = new Map((Object.entries(this.props.columns)));
let i = 0;
return (
<tr>
{columnsMap.forEach((columnValue) =>
<th key={i++}>
{columnValue}
</th>
)}
</tr>
);
}
问题是<th>
子对象不存在于返回的<tr>
对象中;我得到一个 emtpy <tr></tr>
.
但是,如果我使用 Array.prototype.map,则可以正确创建子元素<th>
元素 WILl。
generateTableHead() {
let columnsArray = Object.entries(this.props.columns);
return (
<tr>
{columnsArray.map((column, index) =>
<th key={index}>{column[1]}</th>
)}
</tr>
);
}
我更喜欢第一个版本,因为代码稍微更容易理解,因为我将在 Map 对象中引用键和值,而不是在第二个版本中使用数组索引。
我确信对此有一个非常简单的解释,或者我犯了一个非常简单的错误,我只是无法发现。如果有人能指出问题,我将不胜感激!
这是因为forEach()
不返回任何内容,不像map()
或reduce()
。
从 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach?v=control
forEach(( 为每个数组元素执行一次回调函数;与 map(( 或 reduce(( 不同,它总是返回未定义的值,并且不可链接。典型的用例是在链的末端执行副作用。
,forEach 不会返回任何仅用于迭代array
元素的东西,但map
用于为array
的每个条目return
一些东西。如果你想使用你可以这样使用的forEach
,只需使用一个变量来存储 ui 项并使用 forEach 迭代数组并推送该变量中的项,之后只需返回一个包含所有 td 的 tr,如下所示:
generateTableHead() {
let columnsMap = new Map((Object.entries(this.props.columns)));
let uiItems = [];
let i = 0;
columnsMap.forEach((columnValue) =>
uiItems.push( <th key={i++}>
{columnValue}
</th>)
)
return (
<tr> {uiItems} </tr>
);
}
查看此代码段以了解 map 和 forEach 之间的区别:
let a = [1,2,3,4,5];
let b = a.map(e => e + 1); //it will return e + 1;
let c = a.forEach(e => e + 1); //it will not return anything
console.log('b', b);
console.log('c', c);
即使在第二个版本中,您也不必依赖数组索引。您可以使用Object.values
而不是Object.entries
。
generateTableHead() {
let columnsValues= Object.values(this.props.columns);
let i = 0;
return (
<tr>
{columnsValues.map((columnsValue) =>
<th key={i++}>{columnsValue}</th>
)}
</tr>
);
}