正在发出错误的 URL 请求

Question

我正在将分页和查询搜索添加到我的工单列表中

这是门票列表页面代码

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

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

这是 Ticket Slice，我正在使用 Redux Toolkit

export const getAllTicketsAsync = createAsyncThunk(
  "tickets/getAllTickets",
  async (page, query) => {
    const response = await getTickets(page, query);
    // The value we return becomes the `fulfilled` action payload
    return response;
  }

最后这是 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,
  };
}

);

我看不出我在这里做错了什么？当没有输入任何内容时，查询应该是空字符串，那么为什么这是请求的 URL -“http://localhost:8080/tickets?_page=1&_limit=4&q=[object%20Object]”

Answer 1

createAsyncThunk 接受三个参数：字符串操作类型值、payloadCreator 回调和选项对象（可选）。 在您的实现中，第二个参数payloadCreator是错误的。

payloadCreator 函数将使用两个参数调用：

• arg：单个值
• thunkAPI

要传递 2 个查询参数，您应该将它们作为一个对象传递。

export const getAllTicketsAsync = createAsyncThunk(
  "tickets/getAllTickets",
  async ({ page, query }, thunkAPI) => {
    const response = await getTickets(page, query);
    // The value we return becomes the `fulfilled` action payload
    return response;
  }
)

useEffect(() => {
    dispatch(getAllTicketsAsync({ page, query }));
}, [page, query]);

请查看文档此处。