在過去的一個小時里，我一直在發瘋，試圖找出他的錯誤“警告：App在渲染不同的組件 () 時無法更新組件 ( Nav)。要在內部找到錯誤的 setState() 呼叫Nav，請按照https 中所述的堆疊跟蹤： //reactjs.org/link/setstate-in-render"
import React, {useState, useEffect} from 'react'
import React, {useState, useEffect} from 'react'
import './App.css';
import Cart from './pages/cart'
import Home from './pages/home'
import Drawings from './pages/drawings'
import Paintings from './pages/paintings'
import Photos from './pages/photos'
import Nav from './pages/components/nav'
const App = ()=> {
const [page, setPage] = useState('home');
if(page=='home')
return(
<>
<Nav setPage={setPage}/>
<Home/>
</>
)
else if(page=='drawings')
return(
<>
<Nav setPage={setPage}/>
<Drawings/>
</>
)
}
export default App;
導航.js
import React from 'react'
import 'C:/Users/Bharat/Desktop/ecommerce/vgogh/src/App.css'
const Nav = ({setPage}) => {
return (
<>
<nav className='navBar'>
<div className="home"><button onClick={setPage('home')}>Home</button></div>
<ul>
<li className="navItems"><button onClick={()=>setPage('paintings')}>Painting</button></li>
<li className="navItems"><button onClick={()=>setPage('photos')}>Photos</button></li>
<li className="navItems"><button onClick={()=>setPage('drawings')}>Drawings</button></li>
<li className="navItems" id='cart'><button onClick={()=>setPage('cart')}>Cart</button></li>
</ul>
</nav>
</>
)
}
export default Nav
uj5u.com熱心網友回復：
在 Nav.js 中
而不是這樣寫：
<button onClick={setPage('home')}>Home</button>
你可以寫 ：
<button onClick={()=>setPage('home')}>Home</button>
我想你明白了。要了解有關處理事件的更多資訊，您可以閱讀他們的檔案。https://reactjs.org/docs/handling-events.html
uj5u.com熱心網友回復：
經過一番搜索，我發現我在 nav.js 的“主頁”按鈕中錯過了一個箭頭功能，正如 plichard 指出的那樣導致了無限回圈。
以前的：
<div className="home">
<button onClick={setPage('home')}>Home</button>
</div>`
解決了：
<div className="home">
<button onClick={()=>setPage('home')}>Home</button>
</div>`
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/489200.html
標籤：javascript 反应
上一篇：client.guilds.cache.get(...)。members.get不是函式
下一篇：限制可以選擇的焦點元素的數量