遺漏的類型錯誤：this.setState不是一個函數

Question

我在TableUser類的函數

onSelectRow(key){ 
    // console.log(key,tableData[key]); 
     this.setState({ 
     rowSelectKey : key, 
     rowSelectValue: tableData[key] 
     }); 
} 

。我在<Table>屬性中使用它。

<Table 
     height={this.state.height} 
     fixedHeader={this.state.fixedHeader} 
     fixedFooter={this.state.fixedFooter} 
     selectable={this.state.selectable} 
     multiSelectable={this.state.multiSelectable} 
     onRowSelection={this.onSelectRow} 
    > 

現在，選擇錶行的時候，我可以看到一個錯誤是夾在控制檯Uncaught TypeError: this.setState is not a function

但如果我用箭頭功能onSelectRow再流到順利，但錶行複選框不管用。我試過使用綁定，同樣的複選框問題依然存在，但功能還是不錯的。

更新時間：

這裏是哪裏我從後端渲染值表中的代碼。 我選擇<Table>的行數據進行編輯或刪除。

要選擇<Table>行我使用的方法onSelectRow()多數民衆贊成我使用的箭頭功能，它阻止我選擇表的行。

export default class TableUser extends React.Component { 
componentDidMount(){ 
this.props.dispatch(getUserList()) 
//this.setState({tableData:this.props.userList}) 
} 
constructor(props) { 
super(props); 
this.state = { 
    fixedHeader: true, 
    fixedFooter: true, 
    stripedRows: true, 
    showRowHover: false, 
    selectable: true, 
    multiSelectable: false, 
    enableSelectAll: true, 
    deselectOnClickaway: true, 
    showCheckboxes: true, 
    tableData: [], //initial state for tableData 
    rowSelectKey : '', 
    rowSelectValue: '' 
} 
// this.onSelectRow=this.onSelectRow.bind(this); 
} 
onSelectRow=(key)=>{ 
// console.log(this.state.key,this.state.tableData[key]); 
    this.setState({ 
    rowSelectKey : this.state.key, 
    rowSelectValue: this.props.userList[key], 
    }); 
    // this.state.rowSelectKey=key; 
    // this.state.rowSelectValue=tableData[key]; 
} 
render() { 
return (
    <MuiThemeProvider muiTheme={muiThemebtn}> 
    <div className="table"> 
    <br/> 
    <Table 
     height={this.state.height} 
     fixedHeader={this.state.fixedHeader} 
     fixedFooter={this.state.fixedFooter} 
     selectable={this.state.selectable} 
     multiSelectable={this.state.multiSelectable} 
     onRowSelection={this.onSelectRow} 
    > 
     <TableHeader 
     displaySelectAll={this.state.showCheckboxes} 
     adjustForCheckbox={this.state.showCheckboxes} 
     enableSelectAll={this.state.enableSelectAll} 
     > 
     <TableRow> 
      <TableHeaderColumn colSpan="4" tooltip="" style={{textAlign: 'left',fontSize:'16', 
      fontWeight:'700',color:'black'}}> 
      <p style={{float:'left',marginTop:'7px'}}>Users</p> 
      <FlatButton 
       icon={<ContentAddBox />} 
       style={{float: 'left'}} 
      /> 
      <div className="manageedituserbtn"> 
       <DeleteModal/> 
      </div> 
      <div className="manageedituserbtn"> 
       <EditModal/> 
      </div> 
      <FlatButton 
       icon={<SocialShare/>} 
       style={{float: 'right'}} 
      /> 
      <FlatButton 
       icon={<MapsLocalOffer/>} 
       style={{float:'right'}} 
      />    
      </TableHeaderColumn> 
     </TableRow> 
     <TableRow> 
      <TableHeaderColumn tooltip="Name">Name</TableHeaderColumn> 
      <TableHeaderColumn tooltip="Role">Role</TableHeaderColumn> 
      <TableHeaderColumn tooltip="Phone">Phone</TableHeaderColumn> 
      <TableHeaderColumn tooltip="Email">Email</TableHeaderColumn> 
     </TableRow> 
     </TableHeader> 
     <TableBody 
     displayRowCheckbox={this.state.showCheckboxes} 
     deselectOnClickaway={this.state.deselectOnClickaway} 
     showRowHover={this.state.showRowHover} 
     stripedRows={this.state.stripedRows} 
     > 
      {this.props.userList.map((row, index) => ( 
      <TableRow key={index}> 
      <TableRowColumn>{row.name}</TableRowColumn> 
      <TableRowColumn>{row.role}</TableRowColumn> 
      <TableRowColumn>{row.phone}</TableRowColumn> 
      <TableRowColumn>{row.email}</TableRowColumn> 
      </TableRow> 
     ))} 
     </TableBody> 
    </Table> 
    </div> 
    </MuiThemeProvider> 
); 

} };

現在你能告訴我，爲什麼我不能點擊<Table>行的複選框？

Answer 1

首先我覺得應該是

onRowSelection={(key) => this.onSelectRow(key) } 

，而不是

onRowSelection={this.onSelectRow} 

你必須通過一些關鍵我怎麼，我不知道你在哪裏拿到鑰匙。

然後根據你的反應風格，你必須將onSelectRow結合一些地方，如果你正在使用的類，那麼就應該在使用箭頭在ES6類函數聲明構造

class Component extends React.Components{ 
    constructor(props){ 
     super(props); 
     this.onSelectRow = this.onSelectRow.bind(this); 
    } 
... 
... 
} 

不是標準，它的工作，因爲巴貝爾

你可能要提供完整的組件代碼

的，所以我們可以給更多的幫助