如何修改useSWR的本地data数据且不触发重新验证？

核心原则是不要直接修改useSWR返回的原始data引用：这个值是SWR内部缓存的直接映射，原地修改会污染全局缓存，甚至触发非预期的重验证、同key组件异常渲染。纯客户端排序不需要动SWR的缓存，用以下两种方案即可完全不触发接口重拉：

方案1：本地状态存储处理后的展示数据（最通用） #

把SWR拿到的原始数据当做只读的数据源，额外用一个state存当前页面要渲染的、经过排序等客户端操作的数据，所有修改都只操作本地state，和SWR的缓存完全隔离：

import { useState, useEffect } from 'react'
import useSWR from 'swr'

function Component() {
  const { data: rawData, isLoading } = useSWR('/api/your-endpoint', fetcher)
  // 存客户端处理后用来渲染的数据
  const [displayData, setDisplayData] = useState([])

  // 原始数据拉取到之后同步给展示状态
  useEffect(() => {
    if (rawData) setDisplayData([...rawData]) // 浅拷贝断开和原始缓存的引用关联
  }, [rawData])

  function sortData() {
    // 先拷贝再排序，避免原地修改数组
    const sorted = [...displayData].sort((a, b) => {
      // 替换为你的实际排序逻辑
      return a.id - b.id
    })
    setDisplayData(sorted)
  }

  if (isLoading) return <div>加载中...</div>
  return (
    <div>
      <button onClick={sortData}>点击排序</button>
      {/* 渲染时使用本地处理后的displayData，不用SWR返回的原始data */}
      {displayData.map(item => <div key={item.id}>{item.name}</div>)}
    </div>
  )
}

方案2：用useMemo派生展示数据（更简洁） #

如果只是做排序、筛选这类无副作用的数据转换，不需要额外存整份数据的副本，只需要存排序/筛选的规则，用useMemo基于原始数据和规则派生最终要渲染的数据即可，性能更好也更易维护：

import { useState, useMemo } from 'react'
import useSWR from 'swr'

function Component() {
  const { data: rawData, isLoading } = useSWR('/api/your-endpoint', fetcher)
  // 只存排序规则，不存整份数据
  const [sortOrder, setSortOrder] = useState<'asc' | 'desc' | 'default'>('default')

  const displayData = useMemo(() => {
    if (!rawData) return []
    // 每次派生都先拷贝原始数据，不碰原引用
    const dataToProcess = [...rawData]
    if (sortOrder === 'asc') return dataToProcess.sort((a, b) => a.id - b.id)
    if (sortOrder === 'desc') return dataToProcess.sort((a, b) => b.id - a.id)
    return dataToProcess
  }, [rawData, sortOrder])

  function sortData() {
    setSortOrder(prev => prev === 'asc' ? 'desc' : 'asc')
  }

  if (isLoading) return <div>加载中...</div>
  return (
    <div>
      <button onClick={sortData}>切换排序</button>
      {displayData.map(item => <div key={item.id}>{item.name}</div>)}
    </div>
  )
}

特殊场景方案：手动更新SWR缓存并关闭重验证 #

如果你确实需要让同接口key的其他组件也拿到排序后的数据，可以用SWR提供的全局mutate方法更新缓存，明确传入revalidate: false禁止重拉接口：

import { useSWRConfig } from 'swr'

function Component() {
  const { data } = useSWR('/api/your-endpoint', fetcher)
  const { mutate } = useSWRConfig()

  function sortData() {
    mutate('/api/your-endpoint', 
      (oldData) => [...oldData].sort((a,b) => a.id - b.id), 
      { revalidate: false } // 关键配置：关闭更新后的自动重验证
    )
  }
}

这个方案会修改SWR的全局缓存，纯单组件展示排序的场景没必要用，优先选前两种本地处理的方案。

关键注意事项 #

• 永远不要直接对SWR返回的data调用sort、splice这类原地修改的方法：会直接污染SWR的内部缓存，导致同接口的其他组件拿到异常数据，甚至触发非预期的重验证。
• 所有客户端数据转换前，都要先对原始数据做浅拷贝：数组用[...arr]/arr.slice()，普通对象用{...obj}，确保你操作的是和SWR缓存完全无关的副本。
• SWR默认的重验证触发条件是窗口聚焦、网络重连、key变化等，只要你不修改请求key、不主动调用不带revalidate: false的mutate，纯本地状态的修改完全不会触发接口重拉。

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