使用 Grommet Chart 组件时超过最大更新深度

Question

I am getting the following error

Uncaught Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

Followed by:

The above error occurred in the "Chart" component

my only use of the Chart component (which is from the grommet compontent lib) comes from this bit of code:

 import {Chart} from 'grommet'; const WaveForm = (props:any):JSX.Element => { const size= props.waveForm.length const color = props.isRecording?"recording":props.isPrimed?"primed":"brand"; return ( <Chart bounds={[[0,Math.max(1000,size)], [-25,25]]} values= {props.waveForm.map((e:number,i:number) => ({value:[i, e, -e]}))} size={{"width": "fill",height:"75%"}} round={true} color={color} thickness="hair" /> ); } export default WaveForm;

I cannot for the life of me see why this is causing endless re-renders. Any help would be greatly appreciated.

Answer 1

The issue seemed to be due to an issue with the Grommet Chart handles 'fill'. Changing

size={{"width": "fill",height:"75%"}}

to

size={{"width": "100%",height:"75%"}}

fixed the issue