React Warning: Maximum update depth exceeded

huangapple
go评论96阅读模式
英文:

React Warning: Maximum update depth exceeded

问题

我是React.js的新手，我有一个与用Python编写的服务器通信的应用程序。我使用**useEffect**来持续更新来自服务器的信息，但是我遇到了“Maximum update depth exceeded”错误。这是我的代码：

  1. const address = "http://localhost:4010";
  2. const socket = io(address);
  4. function App() {
  6.   const [MenuState, setMenuState] = useState("/");
  8.   const [UIinputs, setUIinputs] = useState({
  9.     progressState: "stop"
  10.   });
  12.   const [UIoutputs, setUIoutputs] = useState({
  13.     deliveredEnergy: 0,
  14.     estTime: "00:00:00",
  15.     estCost: 0,
  16.     soc: 75,
  17.     chargerState: 4,
  18.     currentPower: 0,
  19.     progressState: 2,
  20.     current: 0,
  21.     voltage: 5,
  22.     carID: "a",
  23.     debug: [{}, {}]
  24.   });
  26.   useEffect(() => {
  27.     socket.emit('UIinputs', UIinputs);
  28.     // eslint-disable-next-line
  29.   }, [UIinputs]);
  31.   useEffect(() => {
  32.     socket.on('UIoutputs', (data) => {
  33.       setUIoutputs(UIoutputs => ({
  34.         ...UIoutputs,
  35.         deliveredEnergy: data.deliveredEnergy,
  36.         estTime: data.estTime,
  37.         soc: data.soc,
  38.         chargerState: data.chargerState,
  39.         currentPower: data.currentPower,
  40.         progressState: data.progressState,
  41.         current: data.current,
  42.         carID: data.carID,
  43.         voltage: data.voltage,
  44.         debug: data.debug,
  45.       }));
  46.     });
  47.     // eslint-disable-next-line
  48.   }, [UIoutputs]);
  50.   return (
  51.     <React.Fragment>
  52.       <CssBaseline />
  53.       <div className='app-container'>
  54.         <div className='top-bar'>
  55.           <Header />
  56.           <BackButton
  57.             MenuState={MenuState}
  58.             setMenuState={setMenuState} />
  59.           <ScanQR />
  60.         </div>
  61.         <Routes>
  62.           <Route path='/' element={
  63.             <Menu
  64.               UIoutputs={UIoutputs}
  65.               setMenuState={setMenuState} />} />
  66.           <Route path='/profile' element={
  67.             <Profile
  68.               UIoutputs={UIoutputs} />} />
  69.           <Route path="/station" element={
  70.             <Charger
  71.               UIinputs={UIinputs}
  72.               setUIinputs={setUIinputs}
  73.               UIoutputs={UIoutputs}
  74.               setUIoutputs={setUIoutputs} />} />
  75.           <Route path="/dev" element={
  76.             <Dev
  77.               UIoutputs={UIoutputs} />} />
  78.         </Routes>
  79.         <BottomBar />
  80.       </div>
  81.     </React.Fragment>
  82.   );
  83. };

希望这可以帮助到你！如果你有任何其他问题，请随时问我。

英文:

I am new to React.js and I have an app that communicates with a server written in Python. I use useEffect to continuously update the information coming from the server But I'm getting the 'Maximum update depth exceeded' error. This is my code:

  1. const address = &quot;http://localhost:4010&quot;
  2. const socket = io(address);
  3. function App() {
  4. const [MenuState, setMenuState] = useState(&quot;/&quot;)
  5. const [UIinputs, setUIinputs] = useState({
  6. progressState: &quot;stop&quot;
  7. });
  8. const [UIoutputs, setUIoutputs] = useState({
  9. deliveredEnergy: 0,
  10. estTime: &quot;00:00:00&quot;,
  11. estCost: 0,
  12. soc: 75,
  13. chargerState: 4,
  14. currentPower: 0,
  15. progressState: 2,
  16. current: 0,
  17. voltage: 5,
  18. carID: &quot;a&quot;,
  19. debug: [{}, {}]
  20. });
  21. useEffect(() =&gt; {
  22. socket.emit(&#39;UIinputs&#39;, UIinputs)
  23. // eslint-disable-next-line
  24. }, [UIinputs])
  25. useEffect(() =&gt; {
  26. socket.on(&#39;UIoutputs&#39;, (data) =&gt; {
  27. setUIoutputs(UIoutputs =&gt; ({
  28. ...UIoutputs,
  29. deliveredEnergy: data.deliveredEnergy,
  30. estTime: data.estTime,
  31. soc: data.soc,
  32. chargerState: data.chargerState,
  33. currentPower: data.currentPower,
  34. progressState: data.progressState,
  35. current: data.current,
  36. carID: data.carID,
  37. voltage: data.voltage,
  38. debug: data.debug,
  39. }));
  40. });
  41. // eslint-disable-next-line
  42. }, [UIoutputs])
  43. return (
  44. &lt;React.Fragment&gt;
  45. &lt;CssBaseline /&gt;
  46. &lt;div className=&#39;app-container&#39;&gt;
  47. &lt;div className=&#39;top-bar&#39;&gt;
  48. &lt;Header /&gt;
  49. &lt;BackButton
  50. MenuState={MenuState}
  51. setMenuState={setMenuState} /&gt;
  52. &lt;ScanQR /&gt;
  53. &lt;/div&gt;
  54. &lt;Routes&gt;
  55. &lt;Route path=&#39;/&#39; element={
  56. &lt;Menu
  57. UIoutputs={UIoutputs}
  58. setMenuState={setMenuState} /&gt;}&gt;
  59. &lt;/Route&gt;
  60. &lt;Route path=&#39;/profile&#39; element={
  61. &lt;Profile
  62. UIoutputs={UIoutputs} /&gt;}&gt;
  63. &lt;/Route&gt;
  64. &lt;Route path=&quot;/station&quot; element={
  65. &lt;Charger
  66. UIinputs={UIinputs}
  67. setUIinputs={setUIinputs}
  68. UIoutputs={UIoutputs}
  69. setUIoutputs={setUIoutputs} /&gt;}&gt;
  70. &lt;/Route&gt;
  71. &lt;Route path=&quot;/dev&quot; element={
  72. &lt;Dev
  73. UIoutputs={UIoutputs} /&gt;}&gt;
  74. &lt;/Route&gt;
  75. &lt;/Routes&gt;
  76. &lt;BottomBar /&gt;
  77. &lt;/div&gt;
  78. &lt;/React.Fragment&gt;
  79. );
  80. };

答案1

得分: 0

当你在useEffect中更新UIoutputs状态时，它会触发重新渲染，进而导致useEffect再次运行，从而创建了一个无限循环的状态更新和重新渲染。为了解决这个问题，你需要确保只在必要时更新状态，并避免引起不必要的重新渲染。

所以像这样移除依赖项：

  1. useEffect(() => {
  2.     socket.on('UIoutputs', (data) => {
  3.       setUIoutputs(UIoutputs => ({
  4.         ...UIoutputs,
  5.         deliveredEnergy: data.deliveredEnergy,
  6.         estTime: data.estTime,
  7.         soc: data.soc,
  8.         chargerState: data.chargerState,
  9.         currentPower: data.currentPower,
  10.         progressState: data.progressState,
  11.         current: data.current,
  12.         carID: data.carID,
  13.         voltage: data.voltage,
  14.         debug: data.debug,
  15.       }));
  16.     });
  17.     // eslint-disable-next-line
  18.   }, [])
英文:

When you update the UIoutputs state inside the useEffect, it triggers a re-render, which in turn causes the useEffect to run again, creating an infinite loop of state updates and re-renders. To fix this issue, you need to ensure that you only update the state when necessary and avoid causing unnecessary re-renders.

so remove the dependency like this

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

  1. useEffect(() =&gt; {
  2. socket.on(&#39;UIoutputs&#39;, (data) =&gt; {
  3. setUIoutputs(UIoutputs =&gt; ({
  4. ...UIoutputs,
  5. deliveredEnergy: data.deliveredEnergy,
  6. estTime: data.estTime,
  7. soc: data.soc,
  8. chargerState: data.chargerState,
  9. currentPower: data.currentPower,
  10. progressState: data.progressState,
  11. current: data.current,
  12. carID: data.carID,
  13. voltage: data.voltage,
  14. debug: data.debug,
  15. }));
  16. });
  17. // eslint-disable-next-line
  18. }, [])

<!-- end snippet -->

huangapple
  • 本文由 发表于 2023年7月31日 18:15:15
  • 转载请务必保留本文链接：https://go.coder-hub.com/76802628.html
  • javascript
  • react-hooks
  • reactjs
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定