遗漏的类型错误: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);
}
...
...
}
不是标准,它的工作,因为巴贝尔
你可能要提供完整的组件代码的,所以我们可以给更多的帮助
箭头功能只是不working..I我不知道为什么?每当我引入一个箭头函数时,'
你需要发布更多的代码... – Kossel
这就是所有的功能..什么是更需要?请让我知道..我不知道如何解决这个 – NDeveloper
相关问题