如何将React Native Text Input动态数据传入Redux Toolkit的createApi请求

数据老陈

2026-9-28

核心修改步骤

1. 修正electedApi.js配置

你在createApi的endpoints定义中使用useSelector是不符合React Hooks规则的，Hooks只能在React组件或自定义Hooks中调用，不能在普通JS函数/配置项中使用。移除错误的useSelector调用，直接定义query接收外部传入的address参数即可，RTK会自动生成对应的调用Hook：

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

export const electedsApi = createApi({
  reducerPath: 'electedsApi', // 建议和API命名统一，避免后续配置冲突
  baseQuery: fetchBaseQuery({
    baseUrl: 'https://baseurl.help.com/', // 补全协议头，否则请求会报错
  }),
  endpoints: builder => ({
    getElectedByAddress: builder.query({
      // 直接接收传入的address参数，拼接为请求路径
      query: (address) => `${address}`,
    }),
  }),
});

// 导出RTK自动生成的查询Hook，命名规则为use+Endpoint名+Query
export const { useGetElectedByAddressQuery } = electedsApi;

2. 两种调用方式选择

先直接回答你的两个疑问：

不需要必须把数据存入slice再传给API，两种方式都可用，按需选择即可
完全不需要使用createAsyncThunk，RTK Query已经封装了所有异步请求、状态管理、缓存逻辑

方式一：沿用你当前存slice的逻辑（适合多页面复用address的场景）

你已经在Landing页把输入的地址存入了addressSlice，直接在跳转后的Main页调用API即可：

// Main.js 代码示例
import { View, Text } from 'react-native';
import { useSelector } from 'react-redux';
import { useGetElectedByAddressQuery } from '你的electedApi.js文件路径';

export default function Main() {
  // 从store中取出已存储的地址
  const { address } = useSelector(state => state.address);
  // 把address作为参数传入查询Hook，skip参数表示address为空时不触发请求
  const { data, error, isLoading } = useGetElectedByAddressQuery(address, {
    skip: !address
  });

  if (isLoading) return <Text>加载中...</Text>;
  if (error) return <Text>请求失败，请重试</Text>;

  return (
    <View>
      <Text>查询结果：{JSON.stringify(data)}</Text>
    </View>
  )
}

方式二：不存slice，直接通过路由传参（适合仅当前流程用address的场景）

可以省去存slice的步骤，直接把输入的地址通过路由参数传给下一页调用：

// 修改Landing.js的handlePress逻辑
const handlePress = () => {
  if (!text) {
    Alert.alert('please enter address');
    setText('');
  } else {
    Alert.alert('thanks');
    setText('');
    // 直接通过路由传参，不需要dispatch存slice
    navigation.navigate('Main', { address: text });
  }
};

// Main.js 取路由参数调用API
import { View, Text } from 'react-native';
import { useGetElectedByAddressQuery } from '你的electedApi.js文件路径';

export default function Main({ route }) {
  // 取路由携带的address参数
  const { address } = route.params;
  const { data, error, isLoading } = useGetElectedByAddressQuery(address);

  // 后续渲染逻辑和方式一一致
}

可选优化建议

addressSlice里的reducer命名getAddress容易产生歧义，建议改为setAddress更符合它设置地址的作用
确保你已经把electedsApi.reducer和electedsApi.middleware配置到了Redux store中，否则API调用会失效

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