JS中for each循环中的变量范围

Question

在给定的 React 组件 sinppet 中，在 for each 循环中，编译器说该行未定义，我该如何解决这个问题？数据是对象类型，列是字符串数组

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

Answer 1

不过，我不会在这里解决范围查询问题，我会按如下方式进行。已测试 CodeSandBox Link、Here

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

Answer 2

您的代码有两个问题：

如果你试图在 JSX 中使用它，你会得到未定义的行，因为 for 关键字不能在 JSX 中使用。正如@Appaji 指出的那样，您需要映射对象的条目。
当你说'for var row in data'时，在循环的每次迭代中，行的值将是数据的键。由于您正在尝试访问行的值而不是键，您可能希望将其更改为数据[行]。或者你可以 Object.values

因此您的代码应该如下所示

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

JS中for each循环中的变量范围

Scope of variable in a for each loop in JS

javascript

variables

scope

reactjs