Question

我刚刚开始编码，现在我正试图理解数组。现在我试图从多维数组创建一个表：

 {
                      this.state.food.map(function(item, key) {
                          return (
                            <Table.Body key={key}>
                              <Table.Row>
                                <Table.Cell>{item}</Table.Cell>
                              </Table.Row>
                            </Table.Body>
                          )
                      })
                    }

此代码在单个单元格中呈现类似＆＃34; chickenfishpotato＆＃34;的东西。我希望它们在几个单元格中分开，如：

     <Table.Cell>{item[0}</Table.Cell>--->chicken 
     <Table.Cell>{item[1]}</Table.Cell>--->fish

但是，但是我不想插入每个项目的位置。我试图这样做，但它不起作用：

{
                      this.state.food.map(function(item, key) {
                          return (
                            <Table.Body key={key}>
                            <Table.Row>
                            {
                              for(let i = 0; i < item.length; i++){
                                return(
                                <Table.Cell>{item[i]}</Table.Cell>
                                )
                              }
                            }
                              </Table.Row>
                            </Table.Body>
                          )
                      })
                    }

我无法理解错误。你能解释一下吗？

Answer 1

由于for循环不能在JSX元素中使用，因此不使用for loop内部渲染，而是使用map。假设item是一个数组，你可以直接循环它，

{
                  this.state.food.map(function(item, key) {
                      return (
                        <Table.Body key={key}>
                        <Table.Row>
                        {
                          item.map(data => (
                            <Table.Cell key={data}>{data}</Table.Cell>
                            )
                          }
                          </Table.Row>
                        </Table.Body>
                      )
                  })
                }

incase item是一个对象，你需要遍历其Object.keys(item).map()之类的键或像Object.values(item).map()这样的值

Answer 2

Shubham Kharti回答说，你可以改用map。

最好将此变量命名为items以便于阅读，因此它将是

items.map(item => <Table.Cell key={item}>{item}</Table.Cell>)

至于您的代码，您尝试从for语句返回，但for语句没有为您创建新的功能scope，这意味着当您的jsx将会转换为React.createElement语句，jsx不会知道for语句。

另一方面，Array.prototype.map将返回带有从传递函数返回的值的新数组（第一个参数）

如果您想使用for，可以使用{{p>}

var rows = [];

for (var i = 0; i < items.length; i++) {
    rows.push(<Table.Cell>{items[i]}</Table.Cell>)
}

return rows

React数组如何访问所有位置

2 个答案: