2017-02-19 56 views
0

嘗試使用ReactJS更新狀態(儘管已經綁定了該功能)時出現以下錯誤。代碼如下所示。該方法被綁定,並且console.log顯示api正在返回正確的數據。可能未處理的拒絕[1] TypeError:無法讀取未定義的屬性'setState'

潛在未處理的排斥[1]類型錯誤:無法讀取的undefined`

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

var rest, mime, client; 

rest = require('rest'); 
mime = require('rest/interceptor/mime'); 

import ParameterDialog from './parameter-dialog'; 

const categoryAvailable = { 
    'POS': 'POS' 
}; 

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

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

export default class ParameterContainer extends React.Component { 

    constructor(props) { 
     super(props); 
     this.state = { parameters: [] }; 
     this.client = rest.wrap(mime); 
     this.fetchFromApi = this.fetchFromApi.bind(this); 
    } 

    fetchFromApi() { 
     this.client({ path: '/api/parameters' }).then(function(response) { 
      console.log(response); 
      console.log(response.entity); 
      this.setState({parameters: response.entity}); 
     }); 
    } 

    componentDidMount() { 
     this.fetchFromApi(); 
    } 

    render() { 
     return (
      <div> 
       <h2>Parameters</h2> 
       <ParameterDialog /> 
       <BootstrapTable data={this.state.parameters} options={options} pagination> 
        <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' filter={ { type: 'TextFilter', delay: 500 } }>Parameter</TableHeaderColumn> 
        <TableHeaderColumn dataField='type' filterFormatted dataFormat={enumFormatter} formatExtraData={this.props.parentState.parameterTypes} 
             filter={{type: 'SelectFilter', options: this.props.parentState.parameterTypes}}>Type</TableHeaderColumn> 
        <TableHeaderColumn dataField='roles'>Roles</TableHeaderColumn> 
       </BootstrapTable> 
      </div> 
     ) 
    } 
} 
財產 '的setState'

回答

1

你裏面。然後函數必須約束以及

您可以使用()= >語法

fetchFromApi() { 
 
     this.client({ path: '/api/parameters' }).then(response => { 
 
      console.log(response); 
 
      console.log(response.entity); 
 
      this.setState({parameters: response.entity}); 
 
     }); 
 
    }

或只是結合功能

fetchFromApi() { 
 
     this.client({ path: '/api/parameters' }).then((function(response) { 
 
      console.log(response); 
 
      console.log(response.entity); 
 
      this.setState({parameters: response.entity}); 
 
     }).bind(this); 
 
    }

1

它看起來像的setState被稱爲promise.then,而不是類的範圍內。一個快速的補救措施將改變它像箭頭功能:

.then(response => { 
    console.log(response); 
    console.log(response.entity); 
    this.setState({parameters: response.entity}); 
}); 
相關問題