反应表中的动态列和值

Question

response : {initial_data: [{
 "Did I see this plant in 2016?"=>"No",
 "Did I see this plant in 2017?"=>"Yes",
 "How Many?"=>1,
 "User Data 4"=>"x",
 "User Data 5"=>nil,
 "Did I see this plant in 2022?"=>"No",
 "Name"=>"Abronia alpina"},
 {"Did I see this plant in 2016?"=>"No",
 "Did I see this plant in 2017?"=>"No",
 "How Many?"=>11,
 "User Data 4"=>"x",
 "User Data 5"=>nil,
 "Did I see this plant in 2022?"=>"Yes",
 "Name"=>"Abronia alpina1"}]
}

基于上述响应，我正在执行下面的代码以动态打印标题和值。

const CUSTOM_COLUMNS = (Object.keys(props.initial_data[0].map((item, index) =>
                            [{
                              id: 'user_data',
                              Header: item,
                              headerClassName: 'family-header',
                              accessor: item,
                              className: 'centered capitalize',
                              show: true
                            }][0]
                          ));

const columns = [
  ...CUSTOM_COLUMNS,
  {
    Header: 'Actions',
    accessor: 'id',
    show: true,
    className: 'centered',
    Cell: (props) => (
      <span className="label label-danger link" onClick={this.deletePlant.bind(this, props.value)}>
        <i className="fa fa-trash"></i> Delete
      </span>
    )
  }
];

我能够正确地动态打印标题，但我的值不是动态的，而是在每一列中显示我最后一个哈希键值。

我的标题应该是：

["Did I see this plant in 2016?", "Did I see this plant in 2017?", "How Many?", "User Data 4", "User Data 5", "Did I see this plant in 2022?", "Name"]

并且行值应该是：

Row1 : ["No", "Yes", 1, "x", "", "No", "Abronia alpina"]
Row1 : ["No", "No", 11, "x", "", "Yes", "Abronia alpina1"]

您能否帮我动态获取它，或者让我知道我在这里做错了什么。我是新手，所以也许我在这里失踪了，所以请纠正我。

Answer 1

如果您使用react-table 来渲染表格，我认为您创建列的逻辑是错误的。应该是这样的。

const columns = Object.keys(response.initial_data[0]).map((key, id)=>{
  return {
    Header: key,
    accessor: key
  }
})

我已尝试使用您的数据创建一个 sn-p。让我知道这是否有帮助。

const ReactTable = window.ReactTable.default

const response = {
  initial_data: [
   {
     "Did I see this plant in 2016?":"No",
     "Did I see this plant in 2017?":"Yes",
     "How Many?":1,
     "User Data 4":"x",
     "User Data 5":"",
     "Did I see this plant in 2022?":"No",
     "Name":"Abronia alpina"
   },
   {
     "Did I see this plant in 2016?":"No",
     "Did I see this plant in 2017?":"No",
     "How Many?":11,
     "User Data 4":"x",
     "User Data 5":"",
     "Did I see this plant in 2022?":"Yes",
     "Name":"Abronia alpina1"
   }]
}

class App extends React.Component {

  render() {
    const data = response.initial_data

    const columns = Object.keys(response.initial_data[0]).map((key, id)=>{
      return {
        Header: key,
        accessor: key
      }
    })

    return <ReactTable
      data = { data }
      columns = { columns }
    />
  }
}

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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-table/6.7.6/react-table.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/react-table/6.7.6/react-table.css"></link>
<div id="app"></div>

Answer 2

使用React-Table，您的标头必须有一个访问器，并且您的数据必须以访问器作为键进行映射

你会像这样创建你的列

  getColumns() {
    return Object.keys(data.initial_data[0]).map(key => {
      return {
        Header: key,
        accessor: key
      };
    });
  }

然后你的表格可以看起来像

class App extends React.Component {
  getColumns() {
    return Object.keys(data.initial_data[0]).map(key => {
      return {
        Header: key,
        accessor: key
      };
    });
  }
  render() {
    const columns = this.getColumns();
    console.log(data.initial_data);
    return (
      <div>
        <ReactTable
          data={data.initial_data}
          columns={columns}
          defaultPageSize={10}
          className="-striped -highlight"
        />
        <br />
        <Tips />
        <Logo />
      </div>
    );
  }
}

根据文档：

accessor: 'propertyName', // or Accessor eg. (row) => row.propertyName

Accessors 是返回值以填充行的函数 列的值。这让渲染功能不必担心 关于访问正确的数据，该值会自动填充 在它的道具中。

如果传递一个字符串或数组，则使用默认访问器。这 默认访问器会将输入解析为数组并递归 把它弄平。任何包含点 (.) 的值都将被拆分。任何 包含括号 ([]) 的值将被拆分。然后这个数组 用作返回值的路径。

Working Codesandbox