私の行とそのjsonスキーマをthis.stateに渡す

Question

私のスキーマと私のjsonをコンストラクタに渡す必要があるという問題に悩まされています。まず、Reactabularを使用してSPAを開発していますが、このライブラリでは、generateRowsという名前の関数を使用してアプリケーションを起動することはできますが、ですが、自分のオブジェクトを注入する必要がありません行を生成します。

class AllFeaturesTable extends React.Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     rows: generateRows(5, schema), 
     searchColumn: 'all', 
     query: {}, // search query 
     sortingColumns: null, 
     columns: this.getColumns(), 
     pagination: { 
     page: 1, 
     perPage: 5 
     } 
    }; 

私はJSONオブジェクトの配列のすべてとして私の行を渡す私は、これらの値を編集しようとするそれまでは素晴らしい作品、と私はこれを編集することはできませんなぜ理にかなって：私のコンポーネントで

私はこのコードの塊を持っていますデータ。私はスキーマを渡さなかったので、私はできません（あなたがスキーマをパラメータとして取ったジェネレータで見ることができるように）。

私はこれをどのように達成できますか？私のthis.state.rowスキーマと私の行を渡します。

これは私の行です：

const predefinedRows = [ 
    { "combustivel" : "Flex", 
    "imagem" : null, 
    "marca" : "Volkswagem", 
    "modelo" : "Gol", 
    "placa" : "FFF-5498", 
    "valor" : 20000 
    }, 
    { "combustivel" : "Gasolina", 
    "imagem" : null, 
    "marca" : "Volkswagem", 
    "modelo" : "Fox", 
    "placa" : "FOX-4125", 
    "valor" : "20000" 
    }, 
    { "combustivel" : "Alcool", 
    "imagem" : "http://carros.ig.com.br/fotos/2010/290_193/Fusca2_290_193.jpg", 
    "marca" : "Volkswagen", 
    "modelo" : "Fusca", 
    "placa" : "PAI-4121", 
    "valor" : "20000" 
    } 

]; 

と、この私のスキーマ：事前に

const schema = { 
    type: 'object', 
    properties: { 
    combustivel: { 
     type: 'string' 
    }, 
    imagem: { 
     type: 'string' 
    }, 
    marca: { 
     type: 'string' 
    }, 
    modelo: { 
     type: 'string' 
    }, 
    placa: { 
     type: 'string' 
    }, 
    valor: { 
     type: 'integer' 
    } 
    }, 
    required: ['combustivel', 'imagem', 'marca', 'modelo', 'placa'] 
}; 

ありがとう！

Answer 1

generateRowsを使用しないでください。 generateRowsはhereを導入し、ダミーの配列データを返します。

コンポーネントを実装するには、exampleに従ってください。 すべての機能を使用し、this.state.rowにスキーマと行を渡したい場合。ちょうどこれを行う：

this.state = { 
     row: { 
     rows: yourRows, 
     schema: yourSchema 
     }, 
     searchColumn: 'all', 
     query: {}, // search query 
     sortingColumns: null, 
     columns: this.getColumns(), 
     pagination: { 
     page: 1, 
     perPage: 5 
     } 
    };