使用Grommet图表组件时，最大更新深度超过了React

Question

我得到了以下错误：

未明错误:超过最大更新深度。当组件在componentWillUpdate或componentDidUpdate中反复调用componentDidUpdate时，就会发生这种情况。React限制嵌套更新的数量，以防止无限循环。

其次是：

“图表”组件中发生的上述错误

我唯一使用的图表组件(它来自grommet组件库)来自以下代码：

​

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;

​

我无法为我的生命明白为什么这会造成无止境的重呈现。任何帮助都将不胜感激。

Answer 1

这个问题似乎是由于Grommet图表句柄的“填充”问题引起的。改变

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

至

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

修正了这个问题