Arrays 反应阵列我怎样才能访问所有位置

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

{
this.state.food.map（函数（项，键）{
返回(
{item}
)
})
}

此代码在单个单元格中呈现类似“chickenfishpotato”的内容。我希望它们在多个单元格中分开，如：

{item[0}->chicken
{item[1]}->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>
                          )
                      })
                    }

{
this.state.food.map（函数（项，键）{
返回(
{
for（设i=0；i

---

我不明白出了什么问题。你能解释一下吗？

因为for循环不能在JSX元素中使用，所以在渲染中使用

for循环

，而不是使用

for循环

，你可以使用

映射

。假设项是一个数组，你可以直接在它上面循环

{
                  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>
                      )
                  })
                }

{
this.state.food.map（函数（项，键）{
返回(
{
item.map（数据=>(
{data}
)
}
)
})
}

---

如果项是一个对象，则需要循环其键，如

object.keys（item）.map（）

或值，如

object.values（item）.map（）

正如Shubham Kharti回答的那样，您可以使用

map

为了便于阅读，最好将此变量命名为

items

，因此

items.map（item=>{item}）

至于您的代码，您尝试从

for

语句返回，但是

for

语句不会为您创建新的功能

scope

，这意味着当您的jsx将转换为

React.createElement

语句时，将有jsx不知道的

for

语句

另一方面，

Array.prototype.map

将使用从传递的函数（第一个参数）返回的值返回新数组

如果您想对使用

，这是可能的，但有类似的东西

var rows = [];

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

return rows

var行=[]；
对于（变量i=0；i

{
                  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>
                      )
                  })
                }

var rows = [];

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

return rows