JS中每个循环的变量范围答案

【问题标题】：Scope of variable in a for each loop in JSJS中每个循环的变量范围
【发布时间】：2021-02-25 03:53:28
【问题描述】：

在给定的反应组件 sinppet 中，在 for each 循环中，编译器说该行未定义，我该如何解决这个问题？ data 是 object 类型，columns 是字符串数组

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

【问题讨论】：

这个tr在哪里呈现或存储？
为什么不像columns那样循环遍历data？

标签： javascript reactjs variables scope

【解决方案1】：

您的代码有两个问题：

如果你试图在 JSX 中使用它，你会得到未定义的行，因为 for 关键字不能在 JSX 中使用。正如@Appaji 指出的那样，您将需要映射对象的条目。
当您说“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>
    })

【讨论】：

【解决方案2】：

虽然，我没有在这里解决范围查询，但我会按如下方式进行。测试 CodeSandBox 链接，Here

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

【讨论】：