React Native中useContext实现问题：useState值调用后不更新

一、输入框无法动态更新state的问题 #

你的代码存在两个关键错误导致输入框状态无法更新：

1. setter函数名拼写错误
   在HomeScreen中，useState声明时写的是const [currentSearch, setCurrentSeach] = useState('')，这里的setCurrentSeach少了一个r；而SearchAndFilterComponent中解构的是setCurrentSearch，导致拿到的是undefined，无法触发状态更新。

2. TextInput事件处理错误
   React Native的TextInput组件中，onChange回调接收的是事件对象，而非输入的文本内容。应使用onChangeText，它会直接将输入的字符串作为参数传入，与setCurrentSearch的参数类型匹配。

修复后的代码片段： #

HomeScreen.js 修正setter名称：

// 修正拼写错误：setCurrentSeach → setCurrentSearch
const [currentSearch, setCurrentSearch] = useState('')

SearchAndFilterComponent.js 修正TextInput事件：

<TextInput style={[styles.searchInput, {width: searchInputWidth}]} 
  value={currentSearch} 
  // 替换onChange为onChangeText
  onChangeText={setCurrentSearch}  
  placeholder={'Search City or Address...'}/>

二、Context作用域的问题 #

• 不能在任意屏幕直接调用：当前Provider仅包裹了HomeScreen内的SearchAndFilterComponent，只有该Provider子组件树中的组件，才能通过useContext(FilterSortContext)获取HomeScreen设置的value。其他不在该子树的屏幕（如从HomeScreen跳转的独立页面）调用useContext时，会拿到创建Context时传入的默认值null。
• 全局访问的解决方案：若需让全应用组件都能访问该Context的value，需在App.js中用FilterSortContext.Provider包裹整个应用的根组件，或包裹所有需要访问该Context的路由屏幕。示例如下：

// App.js示例
import { FilterSortContext } from './context/FilterSortContext';
import { useState } from 'react';
import { NavigationContainer } from '@react-navigation/native';
import HomeScreen from './screens/HomeScreen';
import OtherScreen from './screens/OtherScreen';

export default function App() {
  // 声明需要共享的状态（可将HomeScreen中的state移至此处）
  const [currentSearch, setCurrentSearch] = useState('');
  // ...其他共享状态

  return (
    <FilterSortContext.Provider value={{currentSearch, setCurrentSearch, /* 其他共享状态 */}}>
      <NavigationContainer>
        <Stack.Navigator>
          <Stack.Screen name="Home" component={HomeScreen} />
          <Stack.Screen name="Other" component={OtherScreen} />
        </Stack.Navigator>
      </NavigationContainer>
    </FilterSortContext.Provider>
  );
}

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