0

I'm getting the above error and I don't know how to handle it.

I got a component. And in the render() i'm looping through an array and placing another component and parsing a value to that component like this:

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

In the PriceStock component i'm fetching some data with axios like the code below:

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>
    );
}

}

The error seems to happen when I try to setState in the componentDidMount, any suggestions?

Maiken Madsen
  • 611
  • 1
  • 15
  • 29
  • You need to load all the data from your parent component and send it to chid as props – Dhaval Patel Mar 16 '20 at 10:42
  • I don't get it, the PriceStock component need to know the exact parent for it to appear inside the right div, I haven't been working with react that long sorry :-9 – Maiken Madsen Mar 16 '20 at 10:49
  • https://stackoverflow.com/questions/53991044/how-to-remove-the-warning-cant-perform-a-react-state-update-on-unmounted-compo – joy08 Mar 16 '20 at 10:52
  • Does this answer your question? [Can't perform a React state update on an unmounted component](https://stackoverflow.com/questions/53949393/cant-perform-a-react-state-update-on-an-unmounted-component) – Fraction Mar 16 '20 at 10:57
  • I have looked at both of your links and I have not fixed it jet :-S – Maiken Madsen Mar 16 '20 at 11:13

2 Answers2

0

this is an error occurs because you are updating state before it gets initialized perform your loading activities in the constructor it is the right way to do it 

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)

}
Ali Asgher Badshah
  • 811
  • 1
  • 11
  • 34
0

Found the answear in this question: https://github.com/material-components/material-components-web-react/issues/434

It's remindend me a little bit about the comment with another stackoverflow question.

Maiken Madsen
  • 611
  • 1
  • 15
  • 29