uncaught（在承诺中）axioserror {消息：'请求失败，命名404'，name：'axioSerror'，代码：'err_bad_request'，config：{…}，request

Question

我正在遇到以下错误

AxioSerror{消息：'请求失败，状态代码404

代码为：

"use client"
import axios from "axios";
import { useEffect, useState } from "react";


const page = ({params}) => {
  const [paramsObj, setparamsObj] = useState({})

    const awaitParams = async ()=>{
    const awaitedParams = await params;
    setparamsObj(awaitedParams);
  }
  useEffect(() => {
    awaitParams();
  }, [])

  const {id}= paramsObj;
  console.log(id);


  const getUser=async ()=>{
    const response= await axios.get(`https://jsonplaceholder.typicode.com/users/${id}`);
    console.log(response.data);
  }

  useEffect(() => {
    getUser();
  },[] )


 return (
    <div>page{id}</div>
  )
}

export default page

I期望使用户对象与我的控制台上的ID相对应，但它显示了错误。 尽管我将$ {id}替换为任何值1，但它在控制台上为用户对象提供了ID 1。我被困在任何地方都没有得到答案。

错误的原因是

Answer 1

一开始不确定。因此，您面临错误，没有结果。 首先 您不需要使用

useEffect

＆

useState

在nextj中的页面组件中获取查询搜索参数。而不是：

const page = ({params}) => {
  const [paramsObj, setparamsObj] = useState({})

    const awaitParams = async ()=>{
    const awaitedParams = await params;
    setparamsObj(awaitedParams);
  }
  useEffect(() => {
    awaitParams();
  }, [])

做这个：

const page = ({params}) => {
    const awaitedParams = await params;

然后，将您的

fetch

函数移动到使用效率上，如下：

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

    const getUser = async () => {
      try {
        const response = await axios.get(`https://jsonplaceholder.typicode.com/users/${id}`);
        console.log(response.data);
      } catch (error) {
        console.error("Error fetching user:", error);
      }
    };

    getUser();
  }, [id]);

。 它应该起作用