函数式组件中如何更新对象数组类型的state

你之前的代码存在两个关键问题：

• 函数式更新的用法错误：把更新回调放到了数组里，还用对象展开符合并数组，直接破坏了state的数组结构
• 无意义的state重置：else分支里setWeekdays([...weekdays])完全多余，初始state已经是默认值，重复设置只会引发不必要的重渲染

下面是正确的实现方式：

const [weekdays, setWeekdays] = useState([
  { day: 'S', fullName: 'Sunday', select: false },
  { day: 'M', fullName: 'Monday', select: false },
  { day: 'T', fullName: 'Tuesday', select: false },
  { day: 'W', fullName: 'Wednesday', select: false },
  { day: 'T', fullName: 'Thursday', select: false },
  { day: 'F', fullName: 'Friday', select: false },
  { day: 'S', fullName: 'Saturday', select: false }
])

useEffect(() => {
  if (data?.length > 0) {
    // 把data中的day存入Set，提升查找效率
    const selectedDaySet = new Set(data.map(item => item.day))
    // 基于最新state做不可变更新
    setWeekdays(prev => 
      prev.map(item => ({
        ...item,
        // 判断当前星期是否在选中列表里
        select: selectedDaySet.has(item.day)
      }))
    )
  }
}, [data])

补充说明 #

如果你的data数组是通过fullName来匹配星期的，只需要修改Set的存储内容即可：

const selectedNameSet = new Set(data.map(item => item.fullName))
// ...
select: selectedNameSet.has(item.fullName)

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