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

【问题标题】：How to use 'useParams()' inside of axios API Call?如何在 axios API 调用中使用“useParams()”？
【发布时间】：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] 的问题

【问题讨论】：

标签： reactjs api axios react-hooks react-router-dom

【解决方案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

【讨论】：

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