如何修復無限重新渲染？

Question

錯誤：超出最大更新深度。 當組件在 componentWillUpdate 或 componentDidUpdate 中重復調用 setState 時，就會發生這種情況。 React 限制嵌套更新的數量以防止無限循環。

找到了我的問題的答案，但是，我不明白如何解決這個問題？

 const { useState } = React, { render } = ReactDOM function App() { const [visible, setVisible] = useState(false); const [visible2, setVisible2] = useState(false); const arr1 = { company: [ { id: "random1", companyName: "Apple" }, { id: "random2", companyName: "Samsung" } ] }; const onDataHandle = () => { return arr1.company.map(items => { return ( <div> <span key={items.id}> {items.companyName} <span onClick={onHandleVisible}>Details</span> </span> <br /> </div> ); }); }; const onHandleVisible = () => { setVisible(!visible); }; const onHandleVisible2 = () => { setVisible2(!visible2); }; return ( <div className="App"> <button onClick={onHandleVisible2}>Show</button> {visible && onDataHandle()} </div> ); } render ( <App />, document.getElementById('root') )

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script><div id="root"></div>

我知道這是由於無休止的重新渲染，但解決方案是什么？

Answer 1

您的代碼邏輯中有多個問題（我必須說，這並不完全清楚）：

• 顯示按鈕onClick觸發onHandleVisible2回調，該回調將visible2狀態變量設置為true ，但您的代碼中沒有任何取決於該狀態變量的內容，因此沒有任何反應
• 塊{visible && onDataHandle()}應該觸發onDataHandle() （由於上述原因從未發生過 - visible保持等於false ），但onDataHandle() （即使嘗試返回一些 JSX）不會添加任何渲染在<App />因為它不是 ReactJS 組件
• （次要的）如果您使用onDatahandle()意圖是返回某個組件，那么用額外的<div>結束您的跨度並沒有多大意義。

解決了上述所有問題后，您會得到一些東西，例如：

 const { useState } = React, { render } = ReactDOM function App() { const [visible, setVisible] = useState(false); const [visible2, setVisible2] = useState(false); const arr1 = { company: [ { id: "random1", companyName: "Apple" }, { id: "random2", companyName: "Samsung" } ] }; const Data = () => ( <div> { arr1.company.map(items => ( <span key={items.id}> {items.companyName} <span onClick={onHandleVisible}>Details</span> {visible && <span>There go {items.companyName} details</span>} <br /> </span>)) } </div> ) const onHandleVisible = () => { setVisible(!visible); }; const onHandleVisible2 = () => { setVisible2(!visible2); }; return ( <div className="App"> <button onClick={onHandleVisible2}>Show</button> {visible2 && <Data />} </div> ); } render ( <App />, document.getElementById('root') )

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script><div id="root"></div>

請注意，上面的代碼塊中一個重要問題仍未解決：您對整個應用程序使用了單個變量 ( visible )，因此如果您決定獨立控制每個項目的details可見性，則使用當前方法將無法做到這一點. 但這是一個完全不同的問題，您可以將其作為單獨的問題發布。