React程式設計中需要注意的兩個錯誤

阿新 • • 發佈：2021-05-15

前言

在React程式設計中，我們習慣用useEffect、useState等Hook去進行開發，但是在開發過程中難免會遇到許多問題，前陣子，我在寫程式碼的時候，踩過不少坑，這裡先列舉EYnUzyg兩個較為常見的，也希望讀者們看完這篇文章能夠避免踩坑！

一. useEffect無限渲染

背景：

頁面初始化的時候，我們需要通過useEffect()來進行一些初始化工作。
在useEffect()方法中，呼叫了程式碼getData()去後臺調取資料。
比如頁面所需的userName欄位，我們在獲取資料後，呼叫setUserName(userName)來進行賦值。

虛擬碼

如下：

import React,{ useState,useEffect } from 'react';

const App = () => {
    const [userName,setUserName] = useState<string>('')
    
    useEffect(() => {
    	// 調取後臺介面
        const data = getData()
        // 賦值給對應的State
        setUserName(data.userName)
    })

    return (
        <div>
            <span>使用者名稱：{userName}</span>
        </div>
    )
}
export default App;

這樣的程式碼看似沒什麼問題，邏輯也很正確，但是實際效果會發生什麼呢？來看下下面的例子：

import React,useEffect } from 'react';

const App = () => {
    const [count,setCount] = useState(0)
    useEffect(() => {
        setCount(count+1)
    })

    return (
        <div>
            <span>{count}</span>
        </div>
    )
}
export default App;

頁面效果如下：

React程式設計中需要注意的兩個錯誤

大家測試一下就會發現，頁面上的數字是會無限增長的，而且你的電腦記憶體一下子Up起來程式設計客棧（可以聽聽你的電腦風扇是不是吹得更猛了~）。

這個結果說明了什麼？說明了useEffect()在無限的呼叫中。

原因分析如下：

useEffect()可以理解為初始化，那麼初始化中對有狀態的變數進行了值的更新。
而通過useState()創建出來的有狀態的變數，其值一旦發生改變，又會重新渲染頁面，那麼又會重新呼叫useEffect()方法。
因此就成了一個無限迴圈。最終造成上述圖片所展示的效果。

解決方案如下：useEffect()的第二個引數加一個空陣列即可。

import React,setCount] = useState(0)
    useEffect(() => {
        setCount(count+1)
    },[])

    return (
        <div>
            <span>{count}</span>
        </div>
    )
}
export default App;

那麼useEffect()就只會執行一次：

React程式設計中需要注意的兩個錯誤

二. 帶狀態的變數賦給Input框作為預設值，頁面無法修改內容

廢話不說，直接上案例：

import React,setCount] = useState('初始內容')
    return (
        <div>
            <input type="text" value={count} />
        </www.cppcns.comdiv>
    )
}
export default App;

那麼頁面的效果是這樣的：

React程式設計中需要注意的兩個錯誤

可以發現我明明嘗試輸入欄位，但是Input的內容依舊無法改變。原因如下：

我們用帶狀態的變數作為預設值賦給Input後，頁面會顯示其初始內容。
Input框的vEYnUzygalue值代表其內容值，那麼竟然和這個帶狀態的變數進行了繫結，那麼要想Input框的內容發生改變，帶狀態的變數也必須改變，這樣才能觸發渲染。
但是我們在Input中輸入一些資訊，而這個帶狀態的變數並沒有感知到這個變數的值發生了改變，所以頁面上的內容也不會發生改變。

解決方案：給這個Input框增加一個onChange事件，讓其監聽到內容的改變，並實時的呼叫setXXX方法。

程式碼如下：

import React,setCount] = useState('初始內容')
    return (
        <div>
            <input type="text" value={count} onChange={(event)=>setCount(event.target.value)}/>
        </div>
    )
}
export default App;

頁面效果如下EYnUzyg：

React程式設計中需要注意的兩個錯誤