将文本字段输入值（如果输入）作为可选参数传递给 react-redux-typescript 应用程序中的 GET api 调用

Posted 2023-02-22

【中文标题】将文本字段输入值（如果输入）作为可选参数传递给 react-redux-typescript 应用程序中的 GET api 调用

【英文标题】：Pass text field input value (if entered) as optional params to a GET api call in react-redux-typescript application

【发布时间】：2022-01-08 12:58:44

【问题描述】：

<input type="text" onKeyPress=HandleKeyPress value=text.id1 /> 
<input type="text2" onKeyPress=HandleKeyPress value=text.id2 /> 
<input type="text3" onKeyPress=HandleKeyPress value=text.id3 /> 

const HandleKeyPress = (event:React.KeyboardEvent<htmlInputElement>) => 
if(event.key === 'Enter') 
dispatch( loadList
type:viewType.search
)
) :

Slice.ts 
export const loadList = createAsyncThunk(
'List/get',
async(request:LoadListRequest) => 
const response = await getTask(request);
return response.data;
;

const getTask = (
const Getcall = return axios.get("/api/search/?(add optional params here ??)

我可以使用 react-redux-typescript 实现调用 API，但必须将可选参数传递给 Get API - 添加 URL 之类的 - api/save/?id1=1234&id2=456&id3=789 如果用户输入所有三个然后将它们添加到由分隔的 URL 中“&”。如果用户只输入一个，那么在 URL 参数中只添加一个。

【问题讨论】：

你想在 url axios get 方法上添加动态变量？

@wisnuaryadipa 是的，你能分享一个小sn-p吗，谢谢。

从文本输入字段动态传递到 url 的可选参数是这里的问题？

【参考方案1】：

由于您的示例网址是

const Getcall = return axios.get("/api/search/?(add optional params here ??)

我假设您想将动态变量传递给 http 请求查询字符串。所以你可以像下面的代码一样在 axios 获取请求函数上添加配置对象。

const GetCall = return await axios.get("/api/search/",  params:  id1: 1234, id2: 456, id3: 789