Axios调用Axios . GET()时返回Cannot GET /[object%20Object]

Question

当我试图从前端调用我的API时，我遇到了axios.get()的问题，它返回了，但是当我用postman测试我的后端时，它是好的。

无法获取http://localhost:3040/v2/user/[object%20Object]

请检查下面的代码:

后端api

router.get(
'/:user_id',
userAuthorization,
async (req, res) => {
const _id = req.params.user_id;
try {
const user = await getUserById({ _id });
if (!user) {
res.status(404).send('User not found!');
}
res.json(user);
} catch (error) {
console.error(error.message);
res.status(500).send('Server error!');
}
}
);

前端

const user_id = useParams();
useEffect(() => {
loadLevels();
adminGetUserById();
}, []);

const adminGetUserById = async () => {
console.log('user id ---> ', user_id);
await axios
.get(`http://localhost:3040/v2/user/${user_id}`)
.then((user) => {
console.log('user res ---> ', user.data);
})
.catch((error) => {
console.log(error.message);
});
};

返回如下结果，API请求URL应该是这样的http://localhost:3040/v2/user/62aec70881e46a4794b3a424。我不知道为什么它返回[object%20object]在URL。

请查看下面的图像错误结果

https://i.stack.imgur.com/Zrmqd.png

https://i.stack.imgur.com/Ka2gf.png

Answer 1

在张贴的图像中，我可以看到user_id的日志是这样的格式:

{ user_id: 'your id' }

这意味着useParams();返回一个对象，其中包含属性user_id。

你想要的是提取那个属性。要做到这一点，正如@osmanys-fuentes- lomb所提到的，您应该这样做:

const { user_id } = useParams();

这应该直接将值赋给user_id，而不是创建一个将user_id作为属性的对象。

Answer 2

为了完成@Renato的答案，变量user_id是一个对象{user_id: '62aec...'}。当JavaScript构造字符串http://localhost:3040/v2/user/${user_id}时，它将在内部调用object.toString()，这将导致[object Object]，这就是为什么你会看到

无法获取http://localhost:3040/v2/user/[object%20Object]