【发布时间】：2022-01-13 15:17:12
【问题描述】：
我收到以下错误：
未捕获的错误：超出最大更新深度。当组件在 componentWillUpdate 或 componentDidUpdate 中重复调用 setState 时，可能会发生这种情况。 React 限制了嵌套更新的数量以防止无限循环。
接着是：
上述错误发生在“图表”组件中
我对 Chart 组件（来自索环组件库）的唯一使用来自这段代码：
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;我一生都无法理解为什么这会导致无休止的重新渲染。任何帮助将不胜感激。
【问题讨论】：
-
如果您返回
null而不是Chart，问题会消失吗？如果是这样，请尝试删除所有道具并查看是否可以修复错误。如果是这样，请一一移除道具，直到您确定哪个道具损坏了。 -
感谢我遵循了这个想法。我发现如果我将大小设置为： size={{"width": "100%",height:"75%"}} 而不是 {{"width": "fill",height:"75%"}}那么我不会崩溃。
-
听起来可能是索环的错误和/或不支持“填充”。可能值得filing an issue，因为即使不支持“填充”，我也希望它能够更优雅地失败。
标签： javascript reactjs grommet