反应数组我怎么能访问所有位置

Question

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

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

此代码呈现类似"鸡鱼土豆"在单个单元格中的内容。我希望它们在几个单元格中分开，例如：

     <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 元素中使用，因此不要在 render 中使用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>
                      )
                  })
                }

如果 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语句时，会有for jsx不知道的语句。

另一方面，Array.prototype.map将返回新数组，其中包含您从传递的函数(第一个参数(返回的值

如果你想使用 for ，这是可能的，但有这样的东西

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