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

我尝试使用您的数据创建一个代码段。如果这有帮助，请告诉我。

＆＃13;

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"))

＆＃13;

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

＆＃13;

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是返回值以填充行的函数   列的值。这让渲染功能不必担心   关于访问正确的数据，该值将自动填充   在它的道具中。

如果传递了字符串或数组，则使用默认访问者。该   default accessor将输入解析为数组并递归   压扁它。包含点（。）的任何值都将被拆分。任何   包含括号（[]）的值将被拆分。然后是这个数组   用作返回值的路径。

<强> Working Codesandbox

反应表中的动态列和值

2 个答案: