React Native集成Redux后文本输入失效且无报错求助

我在React Native应用中测试Google Maps Autocomplete API，原本有一个文本输入框可接收搜索词并调用API获取数据。添加Redux管理位置状态后，输入框无法输入内容，此前功能正常且无报错。相关代码如下：

App.js #

const store = createStore(reducers, compose(applyMiddleware(thunk)));

const App = () => {
    return (
        <Provider store={store}>
            <StatusBar barStyle="dark-content"/>
            <SearchScreen/>
        </Provider>
    );
};

export default App;

Reducers.js #

export default combineReducers({
    locations
});

export default (locations = [], action) => {
    switch (action.type) {
        case actionTypes.FETCH_LOCATIONS:
            return action.payload;
        default:
            return locations;
    }
}

SearchScreen.js #

const SearchScreen = () => {
    const [from, setFrom] = useState("");
    const dispatch = useDispatch();

    const handleFrom = (str) => {
        setFrom(str);
        if (from.length >= 5)
            dispatch(getLocations(from))
    }

    return (
        <SafeAreaView>
            <View style={styles.container}>
                <TextInput
                    style={styles.textInput}
                    placeholder="from"
                    value={from}
                    onChangeText={(str) => handleFrom(str)}/>
                <Text>{from}</Text>
            </View>
        </SafeAreaView>
    )
};

export default SearchScreen;

getLocations 动作创建函数 #

export const getLocations = (searchTerm) => async (dispatch) => {
    try {
        const {response} = await api.fetchLocations(searchTerm);
        console.log(`response: ${JSON.stringify(response)}`);
        // dispatch({type: actionTypes.FETCH_LOCATIONS, payload: response?.predictions});
    } catch (e) {
        console.error(e);
    }
}

API 封装 #

const API = axios.create({
    baseURL: 'https://google-maps-autocomplete-plus.p.rapidapi.com/autocomplete'
});

API.interceptors.request.use((req) => {
    req.headers = {
        'X-RapidAPI-Key': 'API-KEY',
        'X-RapidAPI-Host': 'google-maps-autocomplete-plus.p.rapidapi.com'
    };

    return req;
});

export const fetchLocations = (query) => API.get(`?query=${query}&limit=5`);

解决方案及排查步骤 #

1. 修复异步状态判断问题
   setState 是异步操作，调用 setFrom(str) 后，from 的值不会立刻更新。你在判断长度时使用了旧的 from 值，虽然这不会直接导致输入框无法输入，但可能引发逻辑异常，建议改为使用当前输入的 str：

   const handleFrom = (str) => {
       setFrom(str);
       if (str.length >= 5) {
           dispatch(getLocations(str));
       }
   };
   

2. 确认Redux Store创建正确性

   • 检查 Reducers.js 中是否正确导入了 locations reducer，确保 combineReducers 能正确生成根reducer：

     import { combineReducers } from 'redux';
     import locations from './locationsReducer'; // 替换为实际的reducer文件路径
     
     export default combineReducers({
         locations
     });
     

   • 在 App.js 中添加日志，验证store是否正常创建：

     console.log('Store state:', store.getState());
     

     正常情况下应输出包含 locations: [] 的对象。

3. 确保TextInput可交互
   检查 styles.textInput 是否设置了必要的样式（如高度、内边距），避免输入框因样式问题无法被点击或输入：

   const styles = StyleSheet.create({
       container: {
           padding: 16,
       },
       textInput: {
           height: 40,
           borderColor: '#ccc',
           borderWidth: 1,
           borderRadius: 4,
           paddingHorizontal: 8,
           marginBottom: 12,
       },
   });
   

4. 验证Redux依赖与配置

   • 确认已安装所有必要依赖：redux、react-redux、redux-thunk、axios
   • 检查 useDispatch 是否正确从 react-redux 导入，动作创建函数的路径是否正确

5. 排查API请求影响
   虽然你注释了dispatch动作，但异步请求仍可能引发潜在异常。可以暂时注释掉 dispatch(getLocations(str))，测试输入框是否恢复正常，以此排除API请求的干扰。

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