错误：无法对未安装的组件执行 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>
    );
}

}

当我尝试在componentDidMount中设置状态时似乎发生了错误，有什么建议吗？

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

在这个问题中找到答案：https://github.com/material-components/material-components-web-react/issues/434

这让我想起了关于另一个 stackoverflow 问题的评论。