React - 将 this.state 作为 prop 传递

Question

我已经尝试尽我所能进行研究，但我仍然无法理解为什么我的代码无法正常工作。

我正在尝试使用新数据更新 this.state，然后将其传递给 react-bootstrap-table 工具 (http://allenfang.github.io/react-bootstrap-table/example)

我试图将 this.state 作为 "data" 道具中的道具传递，但是当我尝试这样做时，出现以下错误：

react-bootstrap-table.min.js:18 Uncaught TypeError: n.props.data.slice is not a function

我用谷歌搜索了错误并找到了这篇文档 (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'));

Answer 1

将您的 render 方法更改为如下所示。您需要将 getData 中获取的 data 而不是整个状态对象发送到 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>

  );
}

React - 将 this.state 作为 prop 传递

React - passing this.state as prop

javascript

reactjs