JS中每个循环中变量的作用域

Question

在给定的react组件sinppet中，在每个循环中编译器说行未定义，我该如何解决这个问题?Data为object类型，columns为字符串数组

for(var row in data) {
<tr>
{
columns
.map(column =>
(<td>{row[column]}</td>)
)
}
</tr>
}

Answer 1

你的代码有两个问题:

1. 如果您试图在JSX中使用这个，您将得到未定义的行，因为for关键字不能在JSX中使用。您需要像@Appaji指出的那样映射对象的条目。

2. 当你说'for var row in data'时，在循环的每次迭代中，row的值将是data的键。由于您试图访问行的值而不是键，因此您可能希望将其更改为data[row]。或者你可以输入object。values

所以你的代码应该看起来像

Object.values(data).map(row => {
<tr>
{
columns
.map(column =>
(<td>{row[column]}</td>)
)
}
</tr>
})

Answer 2

虽然我在这里不处理范围查询，但我将按照下面的方法进行操作。已测试的CodeSandBox Link, Here

{Object.keys(data).map((row, index) => (
<tr key={index}>
{columns.map((column, _index) => (
<td key={_index}>{data[row][column]}</td>
))}
</tr>
))}