Scope 在 JS 中的每个循环中的变量

Question

In the given react component sinppet, in the for each loop the compiler says that row is not defined, how can I fix this? data is of type object and columns is an array of strings

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

Answer 1

Two issues with your code:

1. In case you are trying to use this inside JSX, you will get rows as undefined because the for keyword cannot be used inside JSX. You will need to map over the entries of the object as @Appaji pointed out.

2. When you say 'for var row in data', in every iteration of the loop, the value of row will be the key of data. Since you are trying to access the value of the row and not the key, you might want to change it to data[row]. Or you could you Object.values

So your code should look like

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

Answer 2

Though, I'm not addressing the scope query here, I would do this as below. Tested CodeSandBox Link,Here

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