遗漏的类型错误:this.setState不是一个函数

问题描述:

我在TableUser类的函数遗漏的类型错误:this.setState不是一个函数

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>行的复选框?

首先我觉得应该是

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); 
    } 
... 
... 
} 

不是标准,它的工作,因为巴贝尔

你可能要提供完整的组件代码

的,所以我们可以给更多的帮助

+0

箭头功能只是不working..I我不知道为什么?每当我引入一个箭头函数时,'

'的复选框都不起作用。虽然功能很好..这很奇怪。是否还有其他方式不使用箭头函数?我必须使用setState来设置变量的值。 – NDeveloper
+0

你需要发布更多的代码... – Kossel

+0

这就是所有的功能..什么是更需要?请让我知道..我不知道如何解决这个 – NDeveloper

相关文章