当后端的端点没有参数时，在选项中添加什么来通过 id 通过 axios 和 useeffect 获取用户？

Question

我希望标题中的问题是可以理解的。从几天前开始，我也一直在寻找解决方案，但找不到任何有效的方法。也许我不明白我不知道。任何帮助将不胜感激。谢谢你。

我已成功通过后端 MongoDB 中的 id 检索用户，端点上没有参数。通过在 body 上写入示例 id 在 Postman 上进行测试。以前，我只通过参数检索用户，从未将 id 放在 body 上。

这就是端点（我问了我的导师，他说因为是NoSQL所以不需要params）。

router.get('/getUser', getSingle)

并在服务上使用此代码：

export const getSingleUser = async (id: string) => {
const userList = await getCollection('users')
const userData = await userList?.findOne({
    _id: new ObjectId(id)
})

console.log('user', userData)

return userData
}

现在我想连接前端。我尝试过 getAllUsers 并且它适用于这些代码。

export const getAllUsers = async (): Promise<IResponse | IErrorResponse> => {
const axiosClient = AxiosClient.createInstance();

try {
    const response = await axiosClient.get("/api/v1/getAll");

    return {
        success: true,
        data: response.data
    };
} catch (err) {
    console.error(err);

    return {
        success: false,
        data: isAxiosError(err) ? err.message : (err as string)
    };
}
};

ReactJS部分

const [users, setUsers] = useState<userData[]>([]);

    useEffect(() => {
    // open browser console to see result
    const getUsers = async () => {
        const response = await getAllUsers();
        // const result = response.json();
        if (response.success) {
            setUsers(response.data as userData[]);
            console.log(response.data);
        } else {
            throw Error("Cannot fetch"); // temporary
            // create error notification wth Chakra
        }
    };
    getUsers()
}, []);

但是我真的找不到使用 id 检索单个用户的方法。 我不知道在端点后面的选项上放置什么来定义要搜索的 id？尝试过字符串、对象接口内部的 id，但它们不起作用。这是最新的试验。

export const getSingleUser = async(**id: string**): Promise<IResponse | IErrorResponse> =>{
const axiosClient = AxiosClient.createInstance();

try {
const response = await axiosClient.get("api/v1/getUser/", **{params: {ID: id}}**);

    return {
        success: true,
        data: response.data
    }
} catch (err) {
    console.error(err);

    return {
        success: false,
        data: isAxiosError(err) ? err.message: (err as string)
    }
}
}

我还可以在这里输入什么参数？我很沮丧，因为我只输入了数据库中的一个 ID。没有工作。什么都没发生。控制台是空的。

useEffect(() => {
    // open browser console to see result
    const getUser = async (**id: string**) => {        
    const response = await getSingleUser(**'64e738b63ef7a62f2d9a3d60'**);

            if (response.success) {
            setSingleUser(response.data as userData[]);
            console.log(response.data);
        } else {
            throw Error("Cannot fetch"); // temporary
            // create error notification wth Chakra
        }
}
getUser(**id**)
}, []);

那么axios get函数的端点后面的选项和useeffect的参数中可以放什么呢？再次感谢。

Answer 1

在后端，您可以从请求路径读取 id：

router.get('/getUser/:id', getSingle)

在您的控制器中

getSingle

您可以从请求路径访问用户ID：

req.params.id

在前端将请求路径更改为：

export const getSingleUser = async(**id: string**): Promise<IResponse | IErrorResponse> =>{
const axiosClient = AxiosClient.createInstance();

try {
    const response = await axiosClient.get(`api/v1/getUser/${id}`);

    return {
       success: true,
       data: response.data
   }
} catch (err) {
    console.error(err);

    return {
       success: false,
       data: isAxiosError(err) ? err.message: (err as string)
    }
  }
}