如何解决React中搜索参数变更时useEffect滞后渲染的问题？

我有一个Browse组件，用于展示SearchBar组件发起请求返回的搜索结果：

• 首次搜索时，results状态为null
• 搜索到曲目后，results变为曲目对象数组
• 切换筛选类型（从「按曲目（By Tracks）」改到「按用户（By Users）」）再次搜索时，出现属性未定义错误——因为渲染先于initResults()执行，results还保留着之前的曲目数组，渲染用户组件时访问result.user.username自然报错

控制台输出 #

首次搜索时：

> init useEffect
> render

组件内再次搜索时：

> render
> init useEffect

组件代码 #

export default function Browse() {
const [results, setResults] = UseSafeState(null)
const [isLoading, setIsLoading] = UseSafeState(true)

const location = useLocation()
const searchParams = new URLSearchParams(location.search)

const search = searchParams.get('search')
const identifierFilter = searchParams.get('identifier_filter')

const initResults = () => {
    setIsLoading(true)

    SearchAPI.search(search, identifierFilter)
        .then((response) => {
            setResults(response.data)
            setIsLoading(false)
        })
        .catch((error) => {
            setResults(null)
            setIsLoading(false)
        })
}

const renderTrackBrowse = () => {
    return results.map((result, key) => <div key={key}>{result.track.name}</div>)
}

const renderUserBrowse = () => {
    return results.map((result, key) => <div key={key}>{result.user.username}</div>)
}

const renderPage = () => {
    console.log('render')
    
    switch (identifierFilter) {
        case FiltersTypesSearchBar.TRACKS.name:
            return renderTrackBrowse()
        case FiltersTypesSearchBar.ARTIST_NAME.name:
            return renderUserBrowse()
        default:
    }
}

useEffect(() => {
    console.log('init useEffect')
    initResults()
}, [location, search, identifierFilter])

return <div className="main double-contained browse">{isLoading ? <Loader /> : renderPage()}</div>
}

核心问题是搜索参数变更时，组件先渲染旧的results数据，再触发useEffect请求新数据，导致渲染逻辑与数据类型不匹配。以下是几种可行的解决方式：

1. 立即重置results状态（推荐） #

在触发请求前先清空旧数据，确保渲染时不会使用与当前筛选类型不匹配的结果：

useEffect(() => {
    console.log('init useEffect')
    // 重置results，避免旧数据干扰新渲染
    setResults(null)
    initResults()
}, [location, search, identifierFilter])

也可以把重置逻辑放到initResults函数开头：

const initResults = () => {
    setIsLoading(true)
    setResults(null) // 提前清空旧数据
    SearchAPI.search(search, identifierFilter)
        .then((response) => {
            setResults(response.data)
            setIsLoading(false)
        })
        .catch((error) => {
            setResults(null)
            setIsLoading(false)
        })
}

2. 给结果绑定类型标识 #

新增状态记录当前results对应的筛选类型，渲染时仅匹配类型一致的内容：

// 新增状态存储当前结果的筛选类型
const [resultType, setResultType] = UseSafeState(null)

const initResults = () => {
    setIsLoading(true)
    SearchAPI.search(search, identifierFilter)
        .then((response) => {
            setResults(response.data)
            setResultType(identifierFilter) // 绑定结果与筛选类型
            setIsLoading(false)
        })
        .catch((error) => {
            setResults(null)
            setResultType(null)
            setIsLoading(false)
        })
}

const renderPage = () => {
    console.log('render')
    // 类型不匹配时直接返回空，避免错误渲染
    if (identifierFilter !== resultType) return null
    
    switch (identifierFilter) {
        case FiltersTypesSearchBar.TRACKS.name:
            return renderTrackBrowse()
        case FiltersTypesSearchBar.ARTIST_NAME.name:
            return renderUserBrowse()
        default:
    }
}

3. 优化useEffect依赖数组（可选） #

由于search和identifierFilter是从location派生的，可简化依赖数组，避免冗余依赖导致的潜在问题：

useEffect(() => {
    const searchParams = new URLSearchParams(location.search)
    const currentSearch = searchParams.get('search')
    const currentFilter = searchParams.get('identifier_filter')
    setResults(null)
    initResults(currentSearch, currentFilter)
}, [location])

// 调整initResults为接收参数
const initResults = (search, identifierFilter) => {
    setIsLoading(true)
    setResults(null)
    SearchAPI.search(search, identifierFilter)
        .then((response) => {
            setResults(response.data)
            setIsLoading(false)
        })
        .catch((error) => {
            setResults(null)
            setIsLoading(false)
        })
}

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