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对象。