使用 React 在表格中顯示 JSON

Question

我是 React 的新手，我正在嘗試顯示來自對象的數據表，並計划為每個商店提供可折疊的屬性詳細信息，但現在我正在努力顯示除第一個值以外的任何內容。 任何幫助表示贊賞。 我查看了許多其他示例，但作為一個新手，我無法理解它們，因此希望首先了解我的確切場景可以讓我自己弄清楚更多。

嘗試使用 for 循環返回多個調用，但只返回一個元素並退出。

import React, { Component } from "react";

class DataStores extends Component {
  state = [

    {
      name:"PODs",
      storeType:"fixed",
      properties: [
        {
          name:"PODNo",
          type: "text",
          regex: ""
        }
    ,
         {
          name:"CustomerCode",
          type: "text",
          regex: ""
        },
        {
          name:"CustomerName", 
          type: "text",
          regex: ""
        },
        {
          name:"RefDate",
          type: "datetime",
          regex: ""
        }]
      }
      ,
      {
        name:"SalesOrders",
        storeType:"variable",
        properties: [
          {
            name:"OrderNo",
            type: "text",
            regex: ""
          }
      ,
          {
            name:"CustomerRef", 
            type: "text",
            regex: ""
          },
          {
            name:"OrderDate",
            type: "datetime",
            regex: ""
          }]
        }


  ];
  ;


  render() {

    console.log('state', this.state);
    for (let store of this.state){
        console.log(store.name);
        let chars = store["properties"]
        console.log(chars);
        for(let i=0, len=chars.length; i < len; i++){
          console.log(chars[i].name)

          // console.log(chars[i].name);
          // console.log(chars[i]["type"]);
        }

    }


  return (
    <table>
    <tbody>{this.state.map((item, key) =>{

             return (
                <tr key = {key}>
                    <td>{item.name}</td>
                    <td>{item.storeType}</td>

                </tr>
              )

           })}</tbody>
     </table>
  )
    // let dataStores = this.state.dataStores.map(store => {
    //     console.log("this the ",Object.keys(store),store.name);      
    //     return (<div><li>{store.name}</li>


    //       </div>
    //     );
    // });
  }
}

export default DataStores;

Answer 1

好了，下面的方法要好得多。

也可以在沙箱上查看： https : //codesandbox.io/s/silly-meadow-f6hpz?fontsize=14

import React, { Component } from "react";

class DataStores extends Component {
  state = {
    values: [
      {
        name: "PODs",
        storeType: "fixed",
        properties: [
          {
            name: "PODNo",
            type: "text",
            regex: ""
          },
          {
            name: "CustomerCode",
            type: "text",
            regex: ""
          },
          {
            name: "CustomerName",
            type: "text",
            regex: ""
          },
          {
            name: "RefDate",
            type: "datetime",
            regex: ""
          }
        ]
      },

      {
        name: "SalesOrders",
        storeType: "variable",
        properties: [
          {
            name: "OrderNo",
            type: "text",
            regex: ""
          },
          {
            name: "CustomerRef",
            type: "text",
            regex: ""
          },
          {
            name: "OrderDate",
            type: "datetime",
            regex: ""
          }
        ]
      }
    ]
  };

  render() {
    // console.log('state', this.state);
    // for (let store of this.state){
    //     console.log(store.name);
    //     let chars = store["properties"]
    //     console.log(chars);
    //     for(let i=0, len=chars.length; i < len; i++){
    //       console.log(chars[i].name)

    //       // console.log(chars[i].name);
    //       // console.log(chars[i]["type"]);
    //     }

    // }

    return (
      <table>
        <tbody>
          {this.state.values.map((item, key) => {
            return (
              <tr key={key}>
                <td>{item.name}</td>
                <td>{item.storeType}</td>
              </tr>
            );
          })}
        </tbody>
      </table>
    );
    // let dataStores = this.state.dataStores.map(store => {
    //     console.log("this the ",Object.keys(store),store.name);
    //     return (<div><li>{store.name}</li>

    //       </div>
    //     );
    // });
  }
}

export default DataStores;