ReactJS 나머지 API에서 테이블에 데이터 바인딩하기

Question

데이터를 가져 오기 위해 나머지 끝점을 호출하고 있는데, 성공적으로 가져오고 상태에 저장되었음을 알 수 있습니다. 그러나 테이블에 데이터가 표시되지 않습니다. 이상적으로는 상태가 변경되면 테이블이 자동으로 새로 고쳐 지도록 작업하기를 원합니다.

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})을 사용하십시오.