我已经尝试过无处不在的研究,但我一直坚持为什么我的代码无法运作。
我尝试使用新数据更新this.state,然后将其传递给react-bootstrap-table工具(http://allenfang.github.io/react-bootstrap-table/example)
我试图通过this.state作为"数据"中的道具。 prop,但是当我尝试这个时,我得到以下错误:
react-bootstrap-table.min.js:18 Uncaught TypeError: n.props.data.slice is not a function
我已经用Google搜索了错误并找到了这个文档(https://github.com/AllenFang/react-bootstrap-table/issues/605),其中谈到了使用componentWillReceiveProps,但我对此没有运气。
任何帮助都会受到大力赞赏。
史蒂夫
class App extends React.Component {
constructor(props){
super(props);
this.state = {
};
this.getData = this.getData.bind(this);
}
//method to fetch data from url
getData(url){
fetch(url)
.then(function(resp){
return resp.json();
})
.then(data => {
//do something with the data
this.setState(data)
})
} //end of getData function
componentDidMount(){
//Details location of our data
var url = "https://fcctop100.herokuapp.com/api/fccusers/top/recent";
//fetches data from url
this.getData(url);
} //end of componentDidMount
render(){
return (
<BootstrapTable data={this.state} striped hover>
<TableHeaderColumn isKey dataField='username'>Username</TableHeaderColumn>
<TableHeaderColumn dataField='recent'>Recent Score</TableHeaderColumn>
<TableHeaderColumn dataField='alltime'>All Time Score</TableHeaderColumn>
</BootstrapTable>
);
}
} //end of App class
ReactDOM.render(<App data = {this.state}/>,
document.getElementById('app'));
答案 0 :(得分:4)
将您的render
方法更改为以下内容。您需要将data
中提取的getData
而不是整个州对象发送到BootstrapTable
。此外,您在.then
中获得的数据应与BootstrapTable对数据的期望相匹配。
另请注意,组件首次渲染时不会填充this.state.data
。只有在fetchUrl
完成this.state.data
后才会填充。
render(){
return (
<BootstrapTable data={this.state.data || []} striped hover>
<TableHeaderColumn isKey dataField='username'>Username</TableHeaderColumn>
<TableHeaderColumn dataField='recent'>Recent Score</TableHeaderColumn>
<TableHeaderColumn dataField='alltime'>All Time Score</TableHeaderColumn>
</BootstrapTable>
);
}