获取反应axios的url端点获取填写表单进行编辑的请求

Question

我正在制作一个预订表单，当我单击编辑它时，新页面会根据 api 中已有的数据预填充表单。我已经将 url 设置为使用 useParams 转到基于 id 的路线，但现在我只得到一个空白表单，因为我无法将 id 号获取到我的 get 请求中。这是第一个 axios get 请求。第二个是获取我的选择下拉列表的选项。感谢您的帮助。如果您需要更多信息/代码，请告诉我。

const { id } = useParams();

useEffect(() => {
    axios.all([
      axios.get('http://localhost:8080/reservations/:id', { headers : { 'Authorization' : 'Bearer ' + sessionStorage.getItem("token") } }),
      axios.get('http://localhost:8080/room-types', { headers : { 'Authorization' : 'Bearer ' + sessionStorage.getItem("token") } })
   ])
  .then(axios.spread((reservationResponse, roomTypesResponse) => {
      console.log(reservationResponse.data, roomTypesResponse.data);
      setReservation(reservationResponse.data);
      setRoomTypes(roomTypesResponse.data); 
      }))
  .catch(() => {
      setApiError(true);
    })
  }, []);

Answer 1

问题

1. 您正在使用 string 文字

   "http://localhost:8080/reservations/:id"

   ，您可能打算使用模板文字并注入

   id

   路由路径参数值

2. Axios.all

   已被弃用多年。现在改用

   Promise.all

   。

解决方案建议

• 使用模板文字将

  id

  值注入请求 URL
• 使用

  Promise.all

  处理 Promise 对象数组
• 使用

  AbortController

  并返回

  useEffect

  清理函数，以在

  id

  更改或组件卸载时取消任何正在进行的请求

const { id } = useParams();

useEffect(() => {
  if (!id) return;

  const controller = new AbortController();

  const options = {
    headers: {
      Authorization: 'Bearer ' + sessionStorage.getItem("token"),
    },
    signal: controller.signal,
  };

  Promise.all([
    axios.get(`http://localhost:8080/reservations/${id}`, options),
    axios.get('http://localhost:8080/room-types', options)
  ])
    .then(([reservationResponse, roomTypesResponse]) => {
      setReservation(reservationResponse.data);
      setRoomTypes(roomTypesResponse.data); 
    })
    .catch(() => {
      setApiError(true);
    });

  return () => {
    controller.abort();
  };
}, [id]);