Reactjs 从对象数组生成表_Reactjs_Html Table

Reactjs 从对象数组生成表

reactjs

Reactjs 从对象数组生成表,reactjs,html-table,Reactjs,Html Table,如果我有这样一个状态：状态={ 数据：[ { inputArr:[1,2,3]， }, { inputArr:[1,2,3]， }, { inputArr:[1,2,3]， } ] }; 我想从输入Arr生成一个表，这样我将有3行3列，它将按顺序排列，123123 我考虑过双地图，但它不起作用，有更好的方法吗 const test=this.state.data.map（（val）=>{ val.map（（val2）=>{ 返回( 瓦尔2 ) } } 您应该有一个嵌套映射，并从这两个映射返回

如果我有这样一个状态：

状态={
数据：[
{
inputArr:[1,2,3]，
},
{
inputArr:[1,2,3]，
},
{
inputArr:[1,2,3]，
}
]
};

我想从输入Arr生成一个表，这样我将有3行3列，它将按顺序排列，123123

我考虑过双地图，但它不起作用，有更好的方法吗

const test=this.state.data.map（（val）=>{
val.map（（val2）=>{
返回(
瓦尔2
)
}
}

您应该有一个嵌套映射，并从这两个映射返回JSX元素

const test= this.state.Data.map((val, index)=>{
     return (
        <tr key={index}>
           {val.inputArr.map((val2)=>{
                return (
                  <th key={val2}>{val2}</th>
                )
            })}
        </tr>
     )
}

const test=this.state.Data.map（（val，index）=>{
返回(
{val.inputArr.map（（val2）=>{
返回(
{val2}
)
})}
)
}

您还需要为元素提供一个键

类应用程序扩展了React.Component{
状态={
数据：[
{
inputArr:[1,2,3]，
},
{
inputArr:[1,2,3]，
},
{
inputArr:[1,2,3]，
}
]
};
render（）{
const test=this.state.Data.map（（val，index）=>{
返回(
{val.inputArr.map（（val2）=>{
返回(
{val2}
)
})}
)
})
返回{test}
}
}
ReactDOM.render（，document.getElementById（'app'）；

您应该有一个嵌套映射，并从这两个映射返回JSX元素

const test= this.state.Data.map((val, index)=>{
     return (
        <tr key={index}>
           {val.inputArr.map((val2)=>{
                return (
                  <th key={val2}>{val2}</th>
                )
            })}
        </tr>
     )
}

const test=this.state.Data.map（（val，index）=>{
返回(
{val.inputArr.map（（val2）=>{
返回(
{val2}
)
})}
)
}

您还需要为元素提供一个键

类应用程序扩展了React.Component{
状态={
数据：[
{
inputArr:[1,2,3]，
},
{
inputArr:[1,2,3]，
},
{
inputArr:[1,2,3]，
}
]
};
render（）{
const test=this.state.Data.map（（val，index）=>{
返回(
{val.inputArr.map（（val2）=>{
返回(
{val2}
)
})}
)
})
返回{test}
}
}
ReactDOM.render（，document.getElementById（'app'）；

我知道您已经接受了答案，但我想详细说明您的代码有什么问题

render() {
  const test=this.state.Data.map((val, index1)=>(
    <tr key={index1}>
      {val.inputArr.map( (val2, index2) => <td key={index2}>{val2}</td> )}
    </tr>
  ))

  return <table>{test}</table>;
}

render（）{
const test=this.state.Data.map（（val，index1）=>(
{val.inputArr.map（（val2，index2）=>{val2}）
))
返回{test}；
}

JavaScript区分大小写，您的属性是
```
数据
```
而不是
```
数据
```
小心使用正确的
```
{}
```
或
```
（）
```
和箭头函数。使用
```
{}
```
意味着您可以生成多个语句并显式返回某些内容。使用
```
（）
```
将自动返回表达式
要在React中输出值，请将其包装在
```
{}
```
中，就像我对
```
{val2}
```
给定数据结构，访问内部数组时必须使用
```
inputarr
```
属性
在元素列表上使用
```
键
```
。您可以

render() {
  const test=this.state.Data.map((val, index1)=>(
    <tr key={index1}>
      {val.inputArr.map( (val2, index2) => <td key={index2}>{val2}</td> )}
    </tr>
  ))

  return <table>{test}</table>;
}

render（）{
const test=this.state.Data.map（（val，index1）=>(
{val.inputArr.map（（val2，index2）=>{val2}）
))
返回{test}；
}

JavaScript区分大小写，您的属性是
```
数据
```
而不是
```
数据
```
小心使用正确的
```
{}
```
或
```
（）
```
和箭头函数。使用
```
{}
```
意味着您可以生成多个语句并显式返回某些内容。使用
```
（）
```
将自动返回表达式
要在React中输出值，请将其包装在
```
{}
```
中，就像我对
```
{val2}
```
给定数据结构，访问内部数组时必须使用
```
inputarr
```
属性
在元素列表上使用
```
键
```
。您可以

映射返回任何东西，而且val2
应该在花括号之间。让我知道这是否有效。上面的返回给我一个语法错误。如果我删除tr，它说val不是一个函数，你必须访问val.inputArr
instead的val
，以及tr
标记的开头应该在映射之外。试试这个：这应该可以很好地工作。不过，您只是没有从第一个map
返回任何内容，而且val2
应该在花括号之间。让我知道这是否有效。上面的返回给我一个语法错误。。如果我删除tr，它会说val不是一个函数，您必须访问val.inputArr
，而不是val
，而且tr
标记的打开位置应该在映射之外。试试这个：这不编译。“，”预期，字段变为红色，您知道编译错误这不编译。“，”预期，字段变红，你知道，谢谢你的贡献，你为我清除了一些东西，你为你的贡献清除了一些东西，你为我清除了一些东西