ReactJS Rest APIからテーブルへのデータのバインド

Question

私はrest endpointを呼び出してデータをフェッチしていますが、これは正常にフェッチされて状態に格納されていることを示しています。ただし、テーブルにはデータが表示されません。理想的には、状態が変更されたときにテーブルが自動的に更新されるように、動作させたい。

import React from 'react'; 
import {BootstrapTable, TableHeaderColumn} from 'react-bootstrap-table'; 

const parameterTypes = { 
    0: 'STRING', 
    1: 'BOOLEAN', 
    2: 'INTEGETR', 
    3: 'DECIMAL' 
}; 

const categoryAvailable = { 
    0: 'POS' 
}; 

const options = { 
    noDataText: 'No parameters founds.' 
} 

function enumFormatter(cell, row, enumObject) { 
    return enumObject[cell]; 
} 

export default class ParameterContainer extends React.Component { 

    constructor() { 
     super(); 
     this.state = { parameters: [] }; 
    } 

    componentDidMount() { 
     fetch('/api/parameters') 
      .then(result => result.json()) 
      .then(params => { 
       console.log(params); 
       this.state.parameters = params; 
       console.log(this.state); 
      }) 
    } 

    render() { 
     return (
      <div> 
       <h2>Parameters</h2> 
       <BootstrapTable data={this.state.parameters} options={options}> 
        <TableHeaderColumn isKey dataField='id'>ID</TableHeaderColumn> 
        <TableHeaderColumn dataField='category' filterFormatted dataFormat={enumFormatter} 
             formatExtraData={categoryAvailable} filter={{ type: 'SelectFilter', options: categoryAvailable }}>Category</TableHeaderColumn> 
        <TableHeaderColumn dataField='subCategory'>Sub Category</TableHeaderColumn> 
        <TableHeaderColumn dataField='parameter'>Parameter</TableHeaderColumn> 
        <TableHeaderColumn dataField='type' filterFormatted dataFormat={ enumFormatter } 
             formatExtraData={parameterTypes} filter={{ type: 'SelectFilter', options: parameterTypes}}>Type</TableHeaderColumn> 
        <TableHeaderColumn dataField='roles'>Roles</TableHeaderColumn> 
       </BootstrapTable> 
      </div> 
     ) 
    } 
} 

Answer 1

コンポーネントのstateを直接変更することはできません。コンポーネントのライフサイクルをうまくプレイするには、this.setState({parameters: params})を使用してください。