Question

如果我有这样的状态：

 state = {
    Data: [
      {
          inputArr: [1, 2, 3],

      },
      {
         inputArr: [1, 2, 3],

      },
      {
          inputArr: [1, 2, 3],

      }
    ]
  };

我想从Arr输入中创建一个表，这样我将有3行3列，并且顺序是123,123,123

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

const test=this.state.data.map( (val)=>{
   val.map( (val2)=>{
 <tr>
    return (
  <th> val2 </th>
      )
    }
 </tr>
}

Answer 1

您应该有一个嵌套的地图，并从它们两个中返回JSX元素

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

您还需要提供元素的键

class App extends React.Component {
  state = {
    Data: [
      {
          inputArr: [1, 2, 3],

      },
      {
         inputArr: [1, 2, 3],

      },
      {
          inputArr: [1, 2, 3],

      }
    ]
  };

  render() {
    const test= this.state.Data.map((val, index)=>{
         return (
            <tr key={index}>
               {val.inputArr.map((val2)=>{
                    return (
                      <th key={val2}>{val2}</th>
                    )
                })}
            </tr>
         )
    })
    return <div>{test}</div>
  }
}

ReactDOM.render(<App/>, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"/>

Answer 2

我看到您已经接受了答案，但是我想详细说明您的代码出了什么问题。

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>;
}

Fiddle demo

JavaScript区分大小写，您的属性是Data而不是data。
使用带有箭头功能的正确{}或()小心。使用{}意味着您可以发出多个语句并显式返回某些内容。使用()将自动返回表达式。
要在React中输出值，请像使用{}一样将其包装在{val2}中
鉴于您的数据结构，访问内部数组时必须使用inputarr属性。
在元素列表上使用key。您可以read about keys in react here。

从对象数组生成表

2 个答案: