Question

所以，我有一个动作创建者，我想从我的API端点获取数据。

以下作品：

export function getData(){
    return function(dispatch){
        axios.get('/api/form/myuser/mytitle').then( (res) => {
            console.log(res.data);
            return dispatch(retrieve(res.data))
        })
        .catch( (err) => {
            console.log(err)
        })
    }
}

但是，在我的情况下，API端点会发生变化。我首先向此网址发送服务器请求：/api/form/:userId/:title 然后，我真正想要做的是上面的行动创建者，在我的客户端有一个axios get请求如下：

axios.get('/api/form/:userId/:title')

这里的控制台日志显然不返回标题String，它返回:title

有可能做我想做的事吗？如果没有，有什么建议吗？

Answer 1

好的，我找到了答案：）

解决方案在于react-router。在此之前，我对react-router不够熟悉。

诀窍是在您的路径路径中定义您的参数，无论它在哪里（您的商店或您定义所有路线的文件），如下所示：

<Route path = "form/:userId/:formtitle" component = {Form} />

然后，您可以通过以下道具访问表单组件中的这些参数：

this.props.params.userId 
this.props.params.formtitle

为了让您的动作创建者可以使用上述道具，您可以将它们用作您在组件中触发的动作创建者的参数，如下所示：

this.props.getData (this.props.params.userId, this.props.params.formtitle)

此处有更多详情：https://github.com/reactjs/react-router-tutorial/tree/master/lessons/08-index-routes

Answer 2

我认为模板字符串可以很好地解决您的问题。请不要犹豫，使用Alt Gr + 7！：）

axios.get(`/api/form/${userId}/${title}`)

小心使用未定义的值。

https://developer.mozilla.org/hu/docs/Web/JavaScript/Reference/Template_literals

如何在URL中使用路由参数执行axios get请求？

2 个答案: