Javascript 应付",;只能更新已安装或正在安装的部件”;
我正试图驯化这只Axios野兽,我编写了下一个代码:Javascript 应付",;只能更新已安装或正在安装的部件”;,javascript,reactjs,ecmascript-6,promise,axios,Javascript,Reactjs,Ecmascript 6,Promise,Axios,我正试图驯化这只Axios野兽,我编写了下一个代码: class AxiosTable extends React.Component { constructor(props){ super(props); this.state = { products: [], }; this.reloadProducts = this.reloadProducts.bind(this); this.assignState = this.ass
class AxiosTable extends React.Component {
constructor(props){
super(props);
this.state = {
products: [],
};
this.reloadProducts = this.reloadProducts.bind(this);
this.assignState = this.assignState.bind(this);
}
assignState(response_data) {
var json_data = response_data;
var lproducts = [];
for(var i in json_data)
lproducts.push(json_data [i]);
console.log(lproducts);
this.setState({products: lproducts});
}
reloadProducts() {
self = this;
axios.get('http://localhost:9000/allProdsExample').then(function (response) {
console.log('----------------------------------------==============');
console.log(response.data);
self.assignState(response.data);
});
}
componentDidMount(){
this.reloadProducts();
}
render() {
return(
<div>
<BootstrapTable data={this.state.products} height='120' scrollTop={ 'Bottom' }>
<TableHeaderColumn isKey dataField='id'>Product ID</TableHeaderColumn>
<TableHeaderColumn dataField='name'>Product Name</TableHeaderColumn>
<TableHeaderColumn dataField='price'>Product Price</TableHeaderColumn>
</BootstrapTable>
</div>
);
};
}
我遵循了过去的例子,如:
来制定我的解决方案。然而,这一警告让我的桌子上什么也看不见。我还在componentDidMount函数上调用我的代码,这让我觉得这个问题不应该发生。我真的需要你的帮助
其他信息:基于:
我添加了以下方法:
componentDidMount() {
this._isMounted = true;
this.reloadProducts();
}
componentWillUnmount(){
this._isMounted = false;
}
表格开始显示数值。有什么解释吗?我仍在努力理解那篇文章。谢谢
更多参考资料:
虽然理论上这是加载数据的正确位置,但这也会导致问题(例如:切换页面以便组件卸载,会抛出给定错误)。也许您应该检查您的组件是否未卸载,然后在页面上进行另一项更改。有没有可能创建一个MVCE?顺便说一句,这是一个警告,不是一个错误,所以你应该没事;)您需要解析响应吗
JSON.parse(response.data)
无需使用JSX进行解析。但是,虽然它说了一个警告,但我试图从setState使用的数据似乎无法在引导表中使用,我为assignState函数添加了一个修改版本。只是这个更改不允许我查看表行,但是添加了componentDidMount和componentWillUnmount。现在我想知道发生了什么!
componentDidMount() {
this._isMounted = true;
this.reloadProducts();
}
componentWillUnmount(){
this._isMounted = false;
}