react閉包導致訪問到舊的state值的處理方法

react函數組件閉包導致事件中獲取到舊的state值的處理辦法。

因為正式場景中的代碼比較復雜，故而徒手擼了一個簡版的例子，代碼中的“useMemo”用來實現某種場景，這里顯得用的相當“做作”，見諒

話不多說，上代碼：

import React, { useState, useMemo } from "react"

function App() {
  const [params, setParams] = useState({
    size: 10,
    page: 1,
  })
  const list = useMemo(() => {
    return [
      {
        key: "aaa",
        name: "aily",
        render: (item) => (
          <button onClick={() => handleClick(item)}>{item.name}</button>
        ),
      },
    ]
  }, [])

  const handleClick = (text) => {
    console.log("params:", params)  //此處只能訪問到初始的params值
    console.log("text:", text)
  }

  return (
    <div className="App">
      <button
        onClick={() => {
          setParams({ size: 11, page: 2 })
          console.log("params changes")
        }}
      >
        change params
      </button>
      <p>
        params size: {params.size}, page: {params.page}
      </p>
      <ul>
        {list.map((item) => (
          <li key={item}>{item.render(item)}</li>
        ))}
      </ul>
    </div>
  )
}

export default App

 

效果圖：

 

 

處理辦法：useRef，見代碼

import React, { useState, useMemo, useRef, useEffect } from "react"

function App() {
  const [params, setParams] = useState({
    size: 10,
    page: 1,
  })

  //划重點 這里這里
10 const paramsRef = useRef(params) 11 useEffect(() => { 12 paramsRef.current = params 13 }, [params]) 14 
  const list = useMemo(() => {
    return [
      {
        key: "aaa",
        name: "aily",
        render: (item) => (
          <button onClick={() => handleClick(item)}>{item.name}</button>
        ),
      },
    ]
  }, [])

  const handleClick = (text) => {
    console.log("params:", params)
    console.log("paramsRef:", paramsRef)
    console.log("text:", text)
  }

  return (
    <div className="App">
      <button
        onClick={() => {
          setParams({ size: 11, page: 2 })
          console.log("params changes")
        }}
      >
        change params
      </button>
      <p>
        params size: {params.size}, page: {params.page}
      </p>
      <ul>
        {list.map((item) => (
          <li key={item}>{item.render(item)}</li>
        ))}
      </ul>
    </div>
  )
}

export default App

 

 

效果圖：

 

 

 

原理：

useRef 返回一個可變的 ref 對象，其 .current 屬性被初始化為傳入的參數（initialValue）。返回的 ref 對象在組件的整個生命周期內保持不變。useRef在每次渲染之后，返回的都是同一個ref對象。