使用Redux Persist触发状态变更时FlatList内Checkbox UI未更新

问题根因 #

你的代码存在3个导致UI不刷新的典型问题：

• Reducer返回值和初始状态结构不一致，破坏了状态树结构
• 修改数组元素时未做对象级浅拷贝，Redux浅比较无法检测到状态变更
• FlatList未配置extraData属性，无法感知数据深层变化触发重渲染

修复方案 #

1. 修正reducer返回结构

初始状态是包含dayState字段的对象，SET_DAYS分支必须返回结构一致的对象，不能直接返回数组：

export const daysReducer = (state = initialDayState, { type, payload }) => {
  switch (type) {
    case ActionTypes.SET_DAYS:
      return {
        ...state,
        dayState: payload
      }
    default:
      return state
  }
}

2. 修正状态修改逻辑，触发Redux状态更新

修改数组元素时需要单独拷贝被修改的对象，保证引用发生变化，让Redux的浅比较能检测到状态变更：

const handleMultipleSelectedDay = (index) => {
    const days = [...selectedDayState]
    // 拷贝对应下标的对象再修改属性
    days[index] = {
      ...days[index],
      isDaySelected: !days[index].isDaySelected
    }
    dispatch(setDays(days))
}

3. 给FlatList添加extraData属性

FlatList默认只监听data属性的引用变化，加上extraData可以通知FlatList依赖的状态发生了变化，触发重渲染：

<FlatList 
  ...
  data={selectedDayState}
  extraData={selectedDayState}
  ...
  <CheckBox
    ...
    value={item?.isDaySelected}
    onChange={() => handleMultipleSelectedDay(index)}
  />
/>

额外校验

确认setDays action creator返回的type和ActionTypes.SET_DAYS完全一致，避免dispatch无效action。

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