使用Array.map更新React状态仅保留最后一个元素的解决方法

问题代码 #

遍历数组更新状态的代码：

const isFocused = useIsFocused();

async function getProfile() {
  const [labels, setLabels] = useState([])
  // ...

  array.map(x => {
    handleChange(x.date)
  })
  // ...
}

useEffect(() => {
  isFocused && getProfile()
}, [isFocused]);

handleChange函数：

function handleChange(date) {
  console.log(date,"THIS IS DATE IN HANDLE")
  setLabels([...labels, date])
}

执行后labels仅保留数组最后一个元素，如何解决？

原因 #

这是React状态更新的闭包陷阱导致的：

• 每次调用handleChange时，函数内引用的labels都是组件当前渲染周期的快照值（初始为空数组）。
• 多次调用setLabels([...labels, date])时，每一次都是基于空数组添加单个元素，最终只有最后一次更新生效。

解决方案 #

方案1：使用函数式更新状态 #

React的setState支持传入函数，函数会接收当前最新的状态值，以此来更新状态，避免闭包问题：

function handleChange(date) {
  console.log(date,"THIS IS DATE IN HANDLE")
  // 使用函数式更新，prev是最新的labels状态
  setLabels(prevLabels => [...prevLabels, date])
}

方案2：一次性处理数组后更新 #

避免循环调用setState，直接将需要添加的日期整理成数组，一次性更新状态，性能更优：

async function getProfile() {
  const [labels, setLabels] = useState([])
  // ...

  // 直接提取所有date并更新
  const newDates = array.map(x => x.date)
  setLabels(prev => [...prev, ...newDates])
  // ...
}

注意：如果array是异步获取的数据，要确保在调用时数据已经存在，避免空数组问题。

内容的提问来源于stack exchange，提问作者Bowoya