问题描述
我正在尝试使用动态数据构建垂直条形图（设置过滤器将导致该图重新呈现不同的数据）。
我的组件如下所示：
const ResultCharBarsHorizontal: React.FC<IProps> = ({ data }) => {
const theme = useTheme();
const classes = useStyles();
return (
<ResponsiveContainer width="100%" height={250}>
<BarChart
layout="vertical"
data={data}
margin={{
top: 5,right: 30,left: LEFT_OFFSET,bottom: 15,}}
>
<Bar
dataKey="value"
fill={"#69AB9B"}
background={{ fill: theme.palette.grey[100] }}
maxBarSize={150}
label={(props: LabelProps) => !!props.value ? `${props.value}%` : 0}
/>
<XAxis hide={true} type="number" dataKey="value" domain={[0,100]} />
<YAxis
dataKey="name"
type="category"
interval={0}
tickSize={0}
axisLine={false}
dy={10}
scale="auto"
tick={
<CustomYAxisTick
style={{
fill: "black",fontSize: "13px",lineHeight: "55px",}}
/>
}
/>
</BarChart>
</ResponsiveContainer>
);
};
Warning: Received NaN for the `width` attribute. If this is expected,cast the value to a string.
in text (created by Text)
in Text (created by Label)
in Label (created by LabelList)
in g (created by Layer)
in Layer (created by LabelList)
in LabelList (created by Bar)
in g (created by Layer)
in Layer (created by Bar)
in Bar (at resultChartBarsHorizontal/index.tsx:79)
in svg (created by Surface)
in Surface (created by BarChart)
in div (created by BarChart)
in BarChart (at resultChartBarsHorizontal/index.tsx:69)
in div (created by ResponsiveContainer)
in ResponsiveContainer (at resultChartBarsHorizontal/index.tsx:68)
in ResultCharBarsHorizontal (at resultQuestion/index.tsx:71)
in div (at resultQuestion/index.tsx:91)
in div (created by ForwardRef(Grid))
in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
in WithStyles(ForwardRef(Grid)) (at resultQuestion/index.tsx:87)
in div (created by ForwardRef(Grid))
in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
in WithStyles(ForwardRef(Grid)) (at resultQuestion/index.tsx:83)
in div (created by ForwardRef(Paper))
in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
in WithStyles(ForwardRef(Paper)) (at resultQuestion/index.tsx:82)
in ResultQuestion (at resultModule/index.tsx:87)
in div (at resultModule/index.tsx:85)
in div (created by Transition)
in div (created by Transition)
in div (created by Transition)
in Transition (created by ForwardRef(Collapse))
in ForwardRef(Collapse) (created by WithStyles(ForwardRef(Collapse)))
in WithStyles(ForwardRef(Collapse)) (at accordion/index.tsx:73)
in div (at accordion/index.tsx:60)
in Accordion (at resultModule/index.tsx:79)
in div (at resultModule/index.tsx:54)
in ResultModule (at analyticsResults/index.tsx:67)
in div (at analyticsResults/index.tsx:65)
in div (at analyticsResults/index.tsx:62)
in main (at analyticsIndexFrame/index.tsx:143)
in div (at analyticsIndexFrame/index.tsx:70)
in AnalyticsIndexFrame (created by Context.Consumer)
in withRouter(AnalyticsIndexFrame) (at analyticsResults/index.tsx:55)
in div (at analyticsResults/index.tsx:54)
in AnalyticsResults (at withSurvey.tsx:60)
in ComposedComponent (created by ConnectFunction)
in ConnectFunction (created by ConnectFunction)
in ConnectFunction (at requireAuth.tsx:36)
in ComposedComponent (created by ConnectFunction)
in ConnectFunction (created by Context.Consumer)
in Route (at routes.tsx:37)
in Switch (at routes.tsx:31)
in Routes (at App.tsx:40)
in div (at App.tsx:38)
in div (at App.tsx:36)
in App (at src/index.tsx:35)
in Router (created by browserRouter)
in browserRouter (at src/index.tsx:34)
in Provider (at src/index.tsx:33)
in IntlProvider (at localeWrapper/index.tsx:34)
in Wrapper (at src/index.tsx:32)
in ThemeProvider (at src/index.tsx:30)
in muipickersutilsprovider (at src/index.tsx:29)
in StrictMode (at src/index.tsx:28)
然后出现有关最大更新深度的错误：
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.
at checkFornestedUpdates (react-dom.development.js:23093)
at scheduleUpdateOnFiber (react-dom.development.js:21164)
at Object.enqueueSetState (react-dom.development.js:12639)
at Text.push../node_modules/react/cjs/react.development.js.Component.setState (react.development.js:471)
at Text.updateWordsByLines (Text.js:102)
at Text.componentDidUpdate (Text.js:96)
at commitLifeCycles (react-dom.development.js:19835)
at commitLayoutEffects (react-dom.development.js:22803)
at HTMLUnkNownElement.callCallback (react-dom.development.js:188)
at Object.invokeGuardedCallbackDev (react-dom.development.js:237)
at invokeGuardedCallback (react-dom.development.js:292)
at commitRootImpl (react-dom.development.js:22541)
at unstable_runWithPriority (scheduler.development.js:653)
at runWithPriority$1 (react-dom.development.js:11039)
at commitRoot (react-dom.development.js:22381)
at finishSyncRender (react-dom.development.js:21807)
at performSyncWorkOnRoot (react-dom.development.js:21793)
at react-dom.development.js:11089
at unstable_runWithPriority (scheduler.development.js:653)
at runWithPriority$1 (react-dom.development.js:11039)
at flushSyncCallbackQueueImpl (react-dom.development.js:11084)
at flushSyncCallbackQueue (react-dom.development.js:11072)
at scheduleUpdateOnFiber (react-dom.development.js:21199)
at Object.enqueueSetState (react-dom.development.js:12639)
at Bar.push../node_modules/react/cjs/react.development.js.Component.setState (react.development.js:471)
at Bar._this.handleAnimationEnd (Bar.js:81)
at setStyle (AnimateManager.js:53)
at setStyle (AnimateManager.js:42)
at shouldUpdate (setRafTimeout.js:12)
checkFornestedUpdates @ react-dom.development.js:23093
scheduleUpdateOnFiber @ react-dom.development.js:21164
enqueueSetState @ react-dom.development.js:12639
push../node_modules/react/cjs/react.development.js.Component.setState @ react.development.js:471
updateWordsByLines @ Text.js:102
componentDidUpdate @ Text.js:96
commitLifeCycles @ react-dom.development.js:19835
commitLayoutEffects @ react-dom.development.js:22803
callCallback @ react-dom.development.js:188
invokeGuardedCallbackDev @ react-dom.development.js:237
invokeGuardedCallback @ react-dom.development.js:292
commitRootImpl @ react-dom.development.js:22541
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
commitRoot @ react-dom.development.js:22381
finishSyncRender @ react-dom.development.js:21807
performSyncWorkOnRoot @ react-dom.development.js:21793
(anonymous) @ react-dom.development.js:11089
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
flushSyncCallbackQueueImpl @ react-dom.development.js:11084
flushSyncCallbackQueue @ react-dom.development.js:11072
scheduleUpdateOnFiber @ react-dom.development.js:21199
enqueueSetState @ react-dom.development.js:12639
push../node_modules/react/cjs/react.development.js.Component.setState @ react.development.js:471
Bar._this.handleAnimationEnd @ Bar.js:81
setStyle @ AnimateManager.js:53
setStyle @ AnimateManager.js:42
shouldUpdate @ setRafTimeout.js:12
requestAnimationFrame (async)
push../node_modules/raf/index.js.module.exports @ index.js:64
shouldUpdate @ setRafTimeout.js:15
requestAnimationFrame (async)
push../node_modules/raf/index.js.module.exports @ index.js:64
shouldUpdate @ setRafTimeout.js:15
requestAnimationFrame (async)
push../node_modules/raf/index.js.module.exports @ index.js:64
shouldUpdate @ setRafTimeout.js:15
requestAnimationFrame (async)
push../node_modules/raf/index.js.module.exports @ index.js:64
shouldUpdate @ setRafTimeout.js:15
requestAnimationFrame (async)
push../node_modules/raf/index.js.module.exports @ index.js:64
shouldUpdate @ setRafTimeout.js:15
requestAnimationFrame (async)
push../node_modules/raf/index.js.module.exports @ index.js:64
shouldUpdate @ setRafTimeout.js:15
requestAnimationFrame (async)
push../node_modules/raf/index.js.module.exports @ index.js:64
shouldUpdate @ setRafTimeout.js:15
requestAnimationFrame (async)
push../node_modules/raf/index.js.module.exports @ index.js:64
shouldUpdate @ setRafTimeout.js:15
requestAnimationFrame (async)
push../node_modules/raf/index.js.module.exports @ index.js:64
shouldUpdate @ setRafTimeout.js:15
requestAnimationFrame (async)
push../node_modules/raf/index.js.module.exports @ index.js:64
shouldUpdate @ setRafTimeout.js:15
requestAnimationFrame (async)
push../node_modules/raf/index.js.module.exports @ index.js:64
shouldUpdate @ setRafTimeout.js:15
requestAnimationFrame (async)
push../node_modules/raf/index.js.module.exports @ index.js:64
shouldUpdate @ setRafTimeout.js:15
requestAnimationFrame (async)
push../node_modules/raf/index.js.module.exports @ index.js:64
shouldUpdate @ setRafTimeout.js:15
requestAnimationFrame (async)
push../node_modules/raf/index.js.module.exports @ index.js:64
shouldUpdate @ setRafTimeout.js:15
requestAnimationFrame (async)
push../node_modules/raf/index.js.module.exports @ index.js:64
shouldUpdate @ setRafTimeout.js:15
requestAnimationFrame (async)
push../node_modules/raf/index.js.module.exports @ index.js:64
shouldUpdate @ setRafTimeout.js:15
requestAnimationFrame (async)
push../node_modules/raf/index.js.module.exports @ index.js:64
shouldUpdate @ setRafTimeout.js:15
requestAnimationFrame (async)
push../node_modules/raf/index.js.module.exports @ index.js:64
shouldUpdate @ setRafTimeout.js:15
requestAnimationFrame (async)
push../node_modules/raf/index.js.module.exports @ index.js:64
shouldUpdate @ setRafTimeout.js:15
requestAnimationFrame (async)
push../node_modules/raf/index.js.module.exports @ index.js:64
shouldUpdate @ setRafTimeout.js:15
requestAnimationFrame (async)
push../node_modules/raf/index.js.module.exports @ index.js:64
shouldUpdate @ setRafTimeout.js:15
requestAnimationFrame (async)
push../node_modules/raf/index.js.module.exports @ index.js:64
shouldUpdate @ setRafTimeout.js:15
requestAnimationFrame (async)
push../node_modules/raf/index.js.module.exports @ index.js:64
shouldUpdate @ setRafTimeout.js:15
requestAnimationFrame (async)
push../node_modules/raf/index.js.module.exports @ index.js:64
shouldUpdate @ setRafTimeout.js:15
requestAnimationFrame (async)
push../node_modules/raf/index.js.module.exports @ index.js:64
setRafTimeout @ setRafTimeout.js:19
setStyle @ AnimateManager.js:38
shouldUpdate @ setRafTimeout.js:12
requestAnimationFrame (async)
push../node_modules/raf/index.js.module.exports @ index.js:64
shouldUpdate @ setRafTimeout.js:15
requestAnimationFrame (async)
push../node_modules/raf/index.js.module.exports @ index.js:64
setRafTimeout @ setRafTimeout.js:19
setStyle @ AnimateManager.js:43
shouldUpdate @ setRafTimeout.js:12
requestAnimationFrame (async)
push../node_modules/raf/index.js.module.exports @ index.js:64
shouldUpdate @ setRafTimeout.js:15
requestAnimationFrame (async)
push../node_modules/raf/index.js.module.exports @ index.js:64
setRafTimeout @ setRafTimeout.js:19
setStyle @ AnimateManager.js:38
shouldUpdate @ setRafTimeout.js:12
requestAnimationFrame (async)
push../node_modules/raf/index.js.module.exports @ index.js:64
shouldUpdate @ setRafTimeout.js:15
requestAnimationFrame (async)
push../node_modules/raf/index.js.module.exports @ index.js:64
setRafTimeout @ setRafTimeout.js:19
setStyle @ AnimateManager.js:43
start @ AnimateManager.js:63
runjsAnimation @ Animate.js:198
runAnimation @ Animate.js:267
componentDidMount @ Animate.js:115
commitLifeCycles @ react-dom.development.js:19814
commitLayoutEffects @ react-dom.development.js:22803
callCallback @ react-dom.development.js:188
invokeGuardedCallbackDev @ react-dom.development.js:237
invokeGuardedCallback @ react-dom.development.js:292
commitRootImpl @ react-dom.development.js:22541
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
commitRoot @ react-dom.development.js:22381
finishSyncRender @ react-dom.development.js:21807
performSyncWorkOnRoot @ react-dom.development.js:21793
(anonymous) @ react-dom.development.js:11089
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
flushSyncCallbackQueueImpl @ react-dom.development.js:11084
flushSyncCallbackQueue @ react-dom.development.js:11072
batchedUpdates$1 @ react-dom.development.js:21862
notify @ Subscription.js:19
notifynestedSubs @ Subscription.js:92
handleChangeWrapper @ Subscription.js:97
dispatch @ redux.js:222
e @ VM10437:1
(anonymous) @ index.js:11
dispatch @ redux.js:638
(anonymous) @ surveyResultList.ts:46
async function (async)
(anonymous) @ surveyResultList.ts:43
(anonymous) @ index.js:8
dispatch @ VM10437:1
(anonymous) @ redux.js:477
(anonymous) @ withSurvey.tsx:49
(anonymous) @ useDidUpdateEffect.tsx:11
commitHookEffectListMount @ react-dom.development.js:19731
commitPassiveHookEffects @ react-dom.development.js:19769
callCallback @ react-dom.development.js:188
invokeGuardedCallbackDev @ react-dom.development.js:237
invokeGuardedCallback @ react-dom.development.js:292
flushPassiveEffectsImpl @ react-dom.development.js:22853
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
flushPassiveEffects @ react-dom.development.js:22820
performSyncWorkOnRoot @ react-dom.development.js:21737
(anonymous) @ react-dom.development.js:11089
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
flushSyncCallbackQueueImpl @ react-dom.development.js:11084
flushSyncCallbackQueue @ react-dom.development.js:11072
discreteUpdates$1 @ react-dom.development.js:21893
discreteUpdates @ react-dom.development.js:806
dispatchdiscreteEvent @ react-dom.development.js:4168
Show 32 more frames
index.js:1 The above error occurred in the <Text> component:
in Text (created by Label)
in Label (created by LabelList)
in g (created by Layer)
in Layer (created by LabelList)
in LabelList (created by Bar)
in g (created by Layer)
in Layer (created by Bar)
in Bar (at resultChartBarsHorizontal/index.tsx:79)
in svg (created by Surface)
in Surface (created by BarChart)
in div (created by BarChart)
in BarChart (at resultChartBarsHorizontal/index.tsx:69)
in div (created by ResponsiveContainer)
in ResponsiveContainer (at resultChartBarsHorizontal/index.tsx:68)
in ResultCharBarsHorizontal (at resultQuestion/index.tsx:71)
in div (at resultQuestion/index.tsx:91)
in div (created by ForwardRef(Grid))
in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
in WithStyles(ForwardRef(Grid)) (at resultQuestion/index.tsx:87)
in div (created by ForwardRef(Grid))
in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid)))
in WithStyles(ForwardRef(Grid)) (at resultQuestion/index.tsx:83)
in div (created by ForwardRef(Paper))
in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
in WithStyles(ForwardRef(Paper)) (at resultQuestion/index.tsx:82)
in ResultQuestion (at resultModule/index.tsx:87)
in div (at resultModule/index.tsx:85)
in div (created by Transition)
in div (created by Transition)
in div (created by Transition)
in Transition (created by ForwardRef(Collapse))
in ForwardRef(Collapse) (created by WithStyles(ForwardRef(Collapse)))
in WithStyles(ForwardRef(Collapse)) (at accordion/index.tsx:73)
in div (at accordion/index.tsx:60)
in Accordion (at resultModule/index.tsx:79)
in div (at resultModule/index.tsx:54)
in ResultModule (at analyticsResults/index.tsx:67)
in div (at analyticsResults/index.tsx:65)
in div (at analyticsResults/index.tsx:62)
in main (at analyticsIndexFrame/index.tsx:143)
in div (at analyticsIndexFrame/index.tsx:70)
in AnalyticsIndexFrame (created by Context.Consumer)
in withRouter(AnalyticsIndexFrame) (at analyticsResults/index.tsx:55)
in div (at analyticsResults/index.tsx:54)
in AnalyticsResults (at withSurvey.tsx:60)
in ComposedComponent (created by ConnectFunction)
in ConnectFunction (created by ConnectFunction)
in ConnectFunction (at requireAuth.tsx:36)
in ComposedComponent (created by ConnectFunction)
in ConnectFunction (created by Context.Consumer)
in Route (at routes.tsx:37)
in Switch (at routes.tsx:31)
in Routes (at App.tsx:40)
in div (at App.tsx:38)
in div (at App.tsx:36)
in App (at src/index.tsx:35)
in Router (created by browserRouter)
in browserRouter (at src/index.tsx:34)
in Provider (at src/index.tsx:33)
in IntlProvider (at localeWrapper/index.tsx:34)
in Wrapper (at src/index.tsx:32)
in ThemeProvider (at src/index.tsx:30)
in muipickersutilsprovider (at src/index.tsx:29)
in StrictMode (at src/index.tsx:28)
Consider adding an error boundary to your tree to customize error handling behavior.
Visit LINK to learn more about error boundaries.
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）