错误：无法对未挂载的组件执行 React 状态更新。这是无操作，但它表示应用程序中存在内存泄漏

Question

我收到了上面的错误，我不知道如何处理。

我得到了一个组件。在render((中，我循环遍历一个数组，放置另一个组件，并解析该组件的值，如下所示：

render() {
let allProducts = this.state.products.map((product, i) => {
return (
<div key={product.article}>
...
<PriceStock value={product.article} />
...
</div>
)
})
}

在PriceStock组件中，我使用axios获取一些数据，如下面的代码：

export default class PriceStock extends React.Component {
constructor(props) {
super(props);
this.state = ({
buttoprice: ''
})
this.getPriceAndStock = this.getPriceAndStock.bind(this)
}
getPriceAndStock(articleNo) {
return axios.post('LINK_TO_URL', {
articleNo: articleNo
}).then(result => {
return result.data
})
}
async componentDidMount() {
let pricestock;
pricestock = await this.getPriceAndStock(this.props.value)
let bruttoPrice = PRICE_TO_PARSE_TO_THE_STATE;
this.setState({ buttoprice: bruttoPrice })
}
render() {
return (
<div >
{this.state.buttoprice}
</div>
);
}
}

当我尝试在组件DidMount中设置State时，似乎发生了错误，有什么建议吗？

Answer 1

这是一个错误，因为您在初始化状态之前正在更新状态在构造函数中执行加载活动这是正确的方法

getPriceAndStock(orderNumber, articleNo) {
return axios.post('LINK_TO_URL', {
orderNr: orderNumber, vareNr: articleNo
}).then(result => {
return result.data
})
}
constructor() {
this.getPriceAndStock(this.props.value)
.then(pricestock=>{
let bruttoPrice = PRICE_TO_PARSE_TO_THE_STATE;
this.state({ buttoprice: bruttoPrice })
})
.catch(console.log)
}

Answer 2

找到了这个问题中的answear：https://github.com/material-components/material-components-web-react/issues/434

这让我对另一个stackoverflow问题的评论有点失望。