如何在 axios API 调用中使用“useParams()”？

Posted 2023-02-22

【中文标题】如何在 axios API 调用中使用“useParams()”？

【英文标题】：How to use 'useParams()' inside of axios API Call?

【发布时间】：2020-06-05 04:59:18

【问题描述】：

早上好，

我正在尝试使用 axios 进行 API 调用，但字符串 url 中有一个变量。

function MarqueDetails() 
let  marqueName  = useParams();
console.log(marqueName)
const [marqueDetails,setMarqueDetails] = useState([]);
useEffect(()=>
axios.get(`http://localhost:5000/brand/` + marqueName)
    .then(response => 
        setMarqueDetails(response.data)
      console.log(response.data);
    )
    .catch((error) => 
      console.log(error);
    )

, []);

问题是当我使用变量marqueName 进行调用时，该变量返回了一个非常奇怪的对象字符串

我知道问题与变量 marqueName 相关，我使用来自 react-router-dom 的 useParams 从请求中提取该变量，但我不知道如何解决它。

提前谢谢你！

P.S : 图片中的 API url 不起作用，我只是注意到它并修复了它，但我仍然遇到 [object20%Object] 的问题

【参考方案1】：

您的模板文字语法不正确。在模板中引用变量时，您需要使用美元符号。

axios.get(`http://localhost:5000/brand/$marqueName`)
    .then(response => 
        setMarqueDetails(response.data)
      console.log(response.data);
    )
    .catch((error) => 
      console.log(error);
    )

, []);

【讨论】：

没有问题！如果你能接受答案是正确的，那就太棒了。

【参考方案2】：

'http://localhost:5000/brand/' + marqueName

如果我们尝试分解这个表达式，我们会得到“将字符串添加到对象”，因为marqueName 变量在括号内。

你想要的是

'http://localhost:5000/brand/' + marqueName

【讨论】：

你是对的，但上面的答案更详细，问题是关于字面语法