0

In my reactjs application, in one component, render function is called many times. I have some data available only at the last time the render is called. I need to do some treatments on this data. Where can I do it?

componentWillMount() {
    get(this.props, 'myarraydata', []).forEach(element => {
        //here i will do some treatments for each elemment
    });
}

render() {
    console.log(get(this.props, 'myarraydata', []));

    return (
        <div>
            <pre>{JSON.stringify(get(this.props, 'myarraydata', []), null, 2) }</pre>
        </div>
    );
}

As you can see, in my application, this render method is called many times, and it uses myarraydata passed from another component and myarraydata is available only when render is called for the last time (means when render is called for the first, second, .. times, my arraydata is empty). but the problem is that componentwillmount method is called only one time, and at that time, myarraydata still empty and i can't do the treatments i need

2 Answers2

0

Try using the componentDidMount lifecycle method.

Need elaboration on

I have some data available only at the last time the render is called

What does this mean exactly?

EDIT : Try this :

componentWillMount() {
  let data = get(this.props, 'myarraydata', [])
  if(data.length !== 0){
   data.forEach(element => {
    //here i will do some treatments for each elemment
    });
  }
}
Shivam Gupta
  • 1,198
  • 9
  • 10
0

componentDidUpdate lifecycle hook is called after each subsequent render, as it can be seen on this diagram:

lifecycle diagram

otice that it isn't called on initial render when componentDidMount is called instead after render hook.

Data that was received via props can be processed there, this requires to call setState or forceUpdate then to make it rendered.

In original code, this requires to introduce the state to this component. Also, componentWillMount was deprecated because it was commonly misused for cases like this one. It should be replaced with constructor code or componentDidMount. In this case the state synchronously derives from myarraydata prop, this is what getDerivedStateFromProps is for:

state = { processedData: null };

static getDerivedStateFromProps(props, state) {
  if (conditionsToNotProcessData) return null;

  const processedData = props.myarraydata || [];
  for (const item of processedData) { ... }

  return { ...state, processedData };
}

render() {
    return (
        <div>
            <pre>{JSON.stringify(this.state.processedData)}</pre>
        </div>
    );
}
Estus Flask
  • 206,104
  • 70
  • 425
  • 565
  • I need to do my treatments only one time when render function is called with non empty data. So i can't use componentdidmount because it is called just after the first render and at that time data is empty. I can't use componentdidupdate because it is called everytime render is called so many times, and i need to run my treatments only one time – user7350434 Sep 12 '18 at 15:21
  • I updated the answer with how I'd expect this to be done. You likely have to control when data is processed and when it's not. – Estus Flask Sep 12 '18 at 15:28
  • thank you @estus it will help me. if i'm not mistaken, getDerivedStateFromProps will be called always before render. Is it possible to say "call this method always before render but as soon as myarraydata is not empty, we stop calling it" ? – user7350434 Sep 12 '18 at 15:35
  • There's no need to really stop calling it. This is what `conditionsToNotProcessData` is for. The indicator for that data was processed once is that `processedData` is not empty, correct? Then it will be `if (state.processedData) return null`. – Estus Flask Sep 12 '18 at 15:41
  • and how can i set the conditionsToNotProcessData, if a store it in component state, i will need to call set state inside getDerivedStateFromProps method and this may lead to endless loop – user7350434 Sep 12 '18 at 15:42
  • You don't need to call setState in getDerivedStateFromProps (and fortunately, there's no way to do that because it's static and doesn't have access to `this.setState`). It's supposed to synchronously return modified state, as shown in the answer. – Estus Flask Sep 12 '18 at 15:45
  • ooooh yeaaah, good solution it seems. Thanks @estus, I will try it, hope it helps me – user7350434 Sep 12 '18 at 15:45
  • Unfortunately, i'm using react 16.2 and getDerivedStateFromProps was introduced in React 16.3 version, so can't use it – user7350434 Sep 13 '18 at 13:43