时间戳

首页 > 解决方案 > 从对象数组生成表

reactjs - 从对象数组生成表

问题描述

如果我有这样的状态：

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

标签： reactjshtml-table

解决方案

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

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

小提琴演示

  • JavaScript 区分大小写，您的属性Data不是data.
  • 小心使用正确的{}或()箭头功能。使用{}意味着您可以进行多个语句并显式返回某些内容。使用()将自动返回表达式。
  • 要在 React 中输出一个值，{}就像我做的那样包装它{val2}
  • 给定您的数据结构，您必须inputarr在访问内部数组时使用该属性。
  • key在元素列表上使用 a 。您可以在此处阅读有关 react 中的键的信息。

推荐阅读