React Hook useEffect,如何使用

了解 useEffect React Hook 的用途以及如何使用它! 如果你對 React Hook 還不熟悉,可以先閱讀我的React Hook 簡介。 在 React 中,我常常使用的一個 Hook 是 useEffect。 import React, { useEffect } from 'react' useEffect 函數會在元件首次渲染以及每次更新後執行。 React 首先會更新 DOM,然後呼叫傳給 useEffect() 的函數。 舉個例子: const { useEffect, useState } = React const CounterWithNameAndSideEffect = () => { const [count, setCount] = useState(0) const [name, setName] = useState('Flavio') useEffect(() => { console.log(`Hi ${name} you clicked ${count} times`) }) return ( <div> <p> Hi {name} you clicked {count} times </p> <button onClick={() => setCount(count + 1)}>Click me</button> <button onClick={() => setName(name === 'Flavio' ?...

如何在事件回調中使用 useEffect

我以這樣的代碼運行程式: useEffect(() => { if (!socket) return socket.on('newuserconnected', (username) => { console.log(connectedusers); }); }, [socket]); 這個程式在 socket.io 連接上初始化了一個 newuserconnected 事件的回調。 我假設這樣做後,每當我在服務器上調用該事件時,客戶端(React 應用程序)會在運行時打印變量 connectedusers 的當前值(假設我在應用程序的其他地方對其進行了更新)。 但是事實上,該變量的值在我定義事件的時刻就“凍結”了。 為了解決這個問題,我需要將該變量的值添加到 useEffect 的依賴列表中: useEffect(() => { //... }, [socket, connectedusers]);

如何解決 React 中的「無法在渲染不同元件時更新元件」錯誤

一個解決 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 登入表單狀態和瀏覽器自動填充的問題

在進行一個項目時,我遇到了一個問題,這個項目是使用 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....

為什麼 useEffect 會運行兩次?

如何解決 useEffect 運行兩次的問題 React 18 於 2022 年 3 月發佈,改變了 useEffect() 的默認行為。 起初,我甚至沒有意識到這一點,這個改變被埋在了大量的新功能之中。 如果您的應用程式在升級到 React 18 後運作怪異,那是因為 useEffect 的默認行為變成運行兩次。 這只在開發模式下發生,但這是每個人構建應用程式的模式。 而且只在嚴格模式下發生,但這是使用 Vite、create-react-app 或 Next.js 構建的應用程式的默認模式。 造成這種情況有其原因。 這並不是您的程式碼有問題,而是 React 現在的運作方式。 唯一的解決辦法是禁用嚴格模式。 嚴格模式很重要,因此這只是一個臨時解決辦法,直到您修正了這個改變引入的任何問題。 在 Vite 中,請前往 src/main.jsx,從以下程式碼中刪除 <React.StrictMode> 包裝元件: import React from 'react' import ReactDOM from 'react-dom/client' import App from './App' import './index.css' ReactDOM.createRoot(document.getElementById('root')).render( <React.StrictMode> <App /> </React.StrictMode>, ) 改為: import React from 'react' import ReactDOM from 'react-dom/client' import App from './App' import '....