component is getting loaded on 2nd iteration in react - reactjs

Question

I am using react plus d3 for my graph. now I am merging two different arrays to populate y graph. but one of the array is showing undefined to me, I checked in reducer both array gets the data properly. but if I go and come back again to the page it is working fine. so means only whenever my DOM is clear it is giving me problem. below is my reducer
const VolumeQuantity = MixMergeGroup.map(data => {
return data.map
.map(mixdata => mixdata.world_volume * sum)
.reduce((prev, curr) => prev + curr);
});
var VolumeQuantityGraph = [];
var tempObj_world = null;
MixMergeGroup.map((data, index) => {
tempObj_world = {};
tempObj_world['world_name'] = data.key;
tempObj_world['world_volume'] = VolumeQuantity[index];
VolumeQuantityGraph[index] = tempObj_world;
});
var overGraph = [];
currentYearData.map((data, index) => {
let temp = {};
temp.key = data.name;
let values = {};
values.value = data.forcasted_volume;
values.label = data.year + ' Volume';
temp.values = [values];
overGraph[index] = temp;
});
return {...state,overallGraph: overGraph,MixVolumeGraph:VolumeQuantityGraph}
here is my component where I use this value
componentWillReceiveProps(nextProps) {
if (
this.state.graphData.length == 0 &&
nextProps.MixVolumeGraph !== undefined
) {
nextProps.overallMixData.forEach(function(element) {
let filtereddata = nextProps.MixVolumeGraph.filter(
data => data.name === element.name
);
element.world_volume = filtereddata[0].volume;
});
console.log('nextprops', nextProps);
this.setState({ graphData: nextProps.overallMixData });
}
}
can please anyone let me know why on first instance its not giving me any value?

Answer 1

from docs React doesn't call componentWillReceiveProps with initial props during mounting. It only calls this method if some of component's props may update. Calling this.setState generally doesn't trigger componentWillReceiveProps.
so you need to call this method in componentdidmount to start it on first mount
edit: sample:
processData(nextProps) {
if (
this.state.graphData.length == 0 &&
nextProps.MixVolumeGraph !== undefined
) {
nextProps.overallMixData.forEach(function(element) {
let filtereddata = nextProps.MixVolumeGraph.filter(
data => data.name === element.name
);
element.world_volume = filtereddata[0].volume;
});
console.log('nextprops', nextProps);
this.setState({ graphData: nextProps.overallMixData });
}
}
componentWillReceiveProps(nextProps) {
processData(nextProps);
}
componentDidMount() {
processData(this.props);
}

Answer 2

I had used componentDidMount but it was giving me error Cannot read property 'props' of undefined this is because I was using foreach loop. I changed into map it is working now below is my update loop
this.props.overallWorldMixData.map(data => {
let filtereddata = this.props.MixVolumeGraph.filter(
dataName=> dataName.name === data.name
);
data.volume = filtereddata[0].volume;
});
I don't know the reason and I know it is not immutable solution, if anyone can clarify this I would be glad