React Context修改状态后消费组件未更新为新值的问题如何解决？

问题原因 #

你为组件A（SearchForm）和组件B（SearchPage）分别包裹了独立的SearchProvider实例，每个SearchProvider都会维护自己独立的上下文状态，两个实例的数据完全隔离，因此组件A修改的只是自己所属Provider的状态，组件B所属的Provider状态没有任何变化，自然只能读到初始值。

解决方法 #

• 移除所有局部的SearchProvider包裹，将所有需要共享SearchContext状态的组件，统一放在同一个SearchProvider的后代节点范围内。通常我们会把Provider套在应用的根节点外层，示例如下：

// 根文件App.js示例
import { SearchProvider } from './你的context文件路径'
import Header from './Header'
import SearchPage from './SearchPage'
import { Routes, Route } from 'react-router-dom'

function App() {
  return (
    <SearchProvider>
      {/* 所有需要用SearchContext的组件都放在这里 */}
      <Header />
      <Routes>
        <Route path="/resultado-de-busca" element={<SearchPage />} />
        {/* 其他路由规则 */}
      </Routes>
    </SearchProvider>
  )
}

• 删掉Header.js中给<SearchForm/>单独套的SearchProvider，删掉原本给<SearchPage/>单独套的SearchProvider，确保全局只有最外层的一个SearchProvider实例。
• （可选优化）调整组件A中状态更新和路由跳转的顺序，先更新状态再执行跳转，避免出现跳转后状态更新滞后的小问题：

// 组件A的search函数调整
function search (e) {
  e.preventDefault();
  const searchContent = document.querySelector(`[data-input-search]`).value;
  setSearchInput({...searchInput, content: searchContent })
  history.push('/resultado-de-busca')
}

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