React Native状态更新后使用react-native-seoul/masonry-list的页面未重渲染问题

问题根因 #

react-native-seoul/masonry-list 组件依赖传入的data属性的引用变化触发重渲染，出现该问题几乎都是状态更新时未生成新的数组引用，或是组件初始化后没有监听到后续的状态变化。手动保存触发热重载后正常，本质是热重载强制触发了全量重渲染，和状态更新逻辑无关。

可落地的修复方案 #

• 修正状态更新的不可变写法
  不要直接修改原状态数组后返回，每次更新都返回全新的数组引用，示例：

  // 错误写法
  const getFavs = async () => {
    const res = await fetchApi()
    favsList.push(...res.data)
    setFavsList(favsList)
  }
  
  // 正确写法
  const getFavs = async () => {
    const res = await fetchApi()
    setFavsList(prev => [...prev, ...res.data])
  }
  

• 给MasonryList绑定强制刷新的key
  将key属性绑定为数据源的长度，只要数据条数变化就会重新渲染整个列表组件，绕过内置的更新判断：

  <MasonryList
    key={favsList.length}
    data={favsList}
    // 其他原有属性保持不变
  />
  

• 适配页面导航的缓存逻辑
  如果你用了react-navigation的标签导航，Favorite页可能会被提前预渲染，此时数据还未返回，后续数据更新后页面聚焦时需要手动触发刷新：

  import { useIsFocused } from '@react-navigation/native'
  
  const Favorite = () => {
    const isFocused = useIsFocused()
    const [refreshFlag, setRefreshFlag] = useState(false)
  
    useEffect(() => {
      // 页面聚焦且有数据时触发一次强制更新
      if (isFocused && favsList.length) {
        setRefreshFlag(prev => !prev)
      }
    }, [isFocused, favsList.length])
  
    return <MasonryList key={`${favsList.length}-${refreshFlag}`} data={favsList} />
  }
  

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