我遇到了這個問題，基本上我的組件使用了 useState() hook 來設置一些變量，但在使用路由進行導航時，狀態並沒有被更新。 事實證明，我的自定義 _app.js 代碼，這段代碼是我從教程中複製過來的，只是用於為應用添加全局樣式，其中存在著這段代碼： export default function App({ Component, pageProps }) { return <Component {...pageProps} /> } 我將其更改為： import { useRouter } from 'next/router' export default function App({ Component, pageProps }) { const router = useRouter() return <Component {...pageProps} key={router.asPath} /> } 這樣做後，它又按預期工作了。 我只需將路徑作為 key 添加即可。
＃React，雙擊編輯文本 如何在React中雙擊元素時編輯頁面的某部分 我需要監聽元素的雙擊事件並使該元素可編輯。 一種方法是使用toggle狀態變量，當元素被雙擊時顯示不同的元素： const [toggle, setToggle] = useState(true) const [name, setName] = useState('test') ... toggle ? ( <p onDoubleClick={() => { setToggle(false) }} >{name}</p> ) : ( <input type='text' value={project.status} /> )} 然後，我們將一些屬性添加到input元素。首先，我們將name狀態分配給value屬性。 然後，我們使用onChange()事件監聽器來在input字段的內容發生變化時設置name變量的值。 最後，我們使用onKeyDown()來攔截Enter或Escape按鍵事件，並返回顯示p元素： <input type="text" value={name} onChange={(event) => { setName(name) }} onKeyDown={(event) => { if (event.key === 'Enter' || event.key === 'Escape') { setToggle(true) event.preventDefault() event.stopPropagation() } }} /> 你也可以在該函數中添加任何副作用，例如在需要時將值保存到其他位置。
當使用useState定義的狀態變量是一個具有屬性的對象時，如何更新它可能有些困惑。 你不能只是更新對象，否則組件將不會重新渲染。 我找到的一種模式涉及創建一個帶有一個屬性的臨時對象，並使用對象解構來從現有的兩個對象中創建一個新對象： const [quizAnswers, setQuizAnswers] = useState({}) ... const updatedValue = {} updatedValue[quizEntryIndex] = answerIndex setQuizAnswers({ ...quizAnswers, ...updatedValue }) 同樣的技巧也可以用於刪除屬性： const copyOfObject = { ...quizAnswers } delete copyOfObject['propertyToRemove'] setQuizAnswers({ ...copyOfObject })
一個解決 React 錯誤的快速指南 在開發 React / Next.js 應用程式時，我遭遇了以下錯誤： 無法在渲染不同元件時更新元件 (Cannot update a component ('App') while rendering a different component) 我進行了相關研究，但所找到的資料中有很多混淆的內容。 以下是我的處理方式：我在 App 元件中管理一個集中式狀態： function MyApp({ Component, pageProps }) { const [lessonsRead, setLessonsRead] = useState() return ( <Component lessonsRead={lessonsRead} setLessonsRead={setLessonsRead} {...pageProps} /> ) } 在 Next.js 的頁面元件中，我呼叫 setLessonsRead 方法，以 SWR（fetch）呼叫的結果為基準，將資料填充到這個狀態中： if (courseData && courseData.lessonsRead) { setLessonsRead(courseData.lessonsRead) } 我將這段程式碼直接放在元件中。 為了解決這個問題，我必須使用 useEffect 將這段程式碼包裹起來，只在資料變動時執行，而不是在每次元件屬性更新時都執行： useEffect(() => { if (courseData && courseData.lessonsRead) { setLessonsRead(courseData.lessonsRead) } }, [courseData])
在進行一個項目時，我遇到了一個問題，這個項目是使用 React 構建的表單，並且與瀏覽器的自動填充功能有關。 你知道嗎，當瀏覽器自動填寫你的用戶名/密碼，因為你之前已經輸入過？ 那就是自動填充，這也是我遇到問題的原因。特別是在 Chrome 和 Firefox 上複製這個問題，但任何瀏覽器都可能碰到這個問題。 這個表單是使用 useState 鉤子構建的一個普通而簡單的表單。 這是表單中的一個示例「email」字段： import { useState } from 'react' //... const [email, setEmail] = useState('') <input id='email' type='email' name='email' value={email} onChange={(event) => setEmail(event.target.value)} /> 當你在這個字段中輸入電子郵件時，email 的值會使用 setEmail 進行更新，這樣我就可以在表單提交事件中使用它，然後將它發送到服務器。 在某個時刻，我意識到瀏覽器正在自動填寫電子郵件地址和密碼，但是 React 卻沒有識別到它！ 可能是因為它在 React 完全運行之前就填寫了該字段，所以無法截取該事件。 我進行了一些研究，不同瀏覽器的不一致性和自動填充工作方式的差異讓我感到困惑，因此我不得不創建一個簡單的解決方案。 我使用了 useRef 和 useEffect 來實現它： import { useState, useEffect, useRef } from 'react' 我創建了一個 ref： const emailField = useRef(null) 並將它附加到 JSX 的輸入字段上： <input ref={emailField} id='email' type='email' name='email' value={email} onChange={(event) => setEmail(event....