工单列表分页与搜索异常：URL参数q显示为[object Object]

问题根源 #

createAsyncThunk的payload creator函数（即你写的async (page, query) => {...}）仅接受一个参数，第二个参数是Redux的thunkAPI对象，并非你传入的query值。

你调用dispatch(getAllTicketsAsync(page, query))时，只有第一个参数page会被传递给payload creator，而query参数位置实际拿到的是thunkAPI对象。当这个对象被拼接到URL中时，就会被转译为[object%20Object]。

修复步骤 #

1. 修改工单列表页面的参数传递方式 #

将page和query包装成一个对象传入：

const [query, setQuery] = useState("");

function handleSearch(e) {
  console.log(e.target.value);
  setQuery(e.target.value);
}
useEffect(() => {
  dispatch(getAllTicketsAsync({ page, query }));
}, [page, query]);

2. 更新Ticket Slice中的createAsyncThunk逻辑 #

解构传入的对象参数，正确获取page和query：

export const getAllTicketsAsync = createAsyncThunk(
  "tickets/getAllTickets",
  async ({ page, query }) => {
    const response = await getTickets(page, query);
    // 返回值会成为`fulfilled` action的payload
    return response;
  }
);

3. 清理API调用代码的冗余语法 #

你的API代码末尾多了一个多余的);，需要删除：

export async function getTickets(page, query) {
  const response = await fetch(
    `http://localhost:8080/tickets?_page=${page}&_limit=4&q=${query}`
  );
  const data = await response.json();
  const totalItems = await response.headers.get("X-Total-Count");
  console.log(data);

  return {
    data,
    totalItems: +totalItems,
  };
}
// 移除这里多余的);

完成以上修改后，未输入搜索内容时query会是空字符串，请求URL将符合预期：http://localhost:8080/tickets?_page=1&_limit=4&q=。

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