Axios 获取请求问题

Posted 2023-02-24

【中文标题】Axios 获取请求问题

【英文标题】：Axios Get request issue

【发布时间】：2018-12-26 06:23:17

【问题描述】：

当我点击下面的操作列上的查看按钮时，我想要

它将被重定向到另一个页面，该页面显示一个包含 Select 查询结果的列表。代码如下：

我的路由器：

exports.viewclient = function(req, res) 
  var Code = req.query.Code;
    console.log(req.params);

    connection.query('SELECT Code, Prenom, Nom, FAX, Telephone, Email, Adresse1, Adresse2  FROM clients  WHERE Code = ?',[req.params.Code],  function(error, results, fields) 
        if (error) throw error;
        res.send(JSON.stringify(results));
console.log(results);
    );

我的服务器：

router.get('/viewclient/:Code', clients.viewclient);

我在 Liste 类上的 handleView 方法：

handleView(event) 
    try 

      console.log("Voir client")
      this.props.history.push('/clients/viewclient/' + this.state.Code);

    
    catch (error) 
      this.setState( error );
    
  

查看类：

constructor(props) 
        super(props);
        this.state = 
            clients: [],
            Code: this.props.match.params.Code


        ;
 componentDidMount() 


    axios.get('http://localhost:4000/app/viewclient/' + this.state._code)

        .then(response => 
            if (response && response.data) 
                this.setState( clients: response.data );
            
        )
        .catch(error => console.log(error));

当我使用 Postman http://localhost:4000/app/viewclient/1111 运行后端时，它会返回 ["Code":1111,"Prenom":"test","Nom":"test","FAX":"58985688888","Telephone":"58985699888","Email":"[e-mail]","Adresse1":"","Adresse2":""]

但是当我运行我的前端时，它会将我重定向到http://localhost:3000/app/viewclient/undefined，我无法查看 Select 的结果。

我该如何解决？

【问题讨论】：

错字：Code: this.props.match.params.Code 与 this.state._code 不匹配。

我编辑了它@Quentin，它在我发布我的答案时效果很好，你能在帖子中再次启用帖子问题吗？

【参考方案1】：

您的状态如下所示：

this.state = 
  clients: [],
  Code: this.props.match.params.Code
;

但是你这样称呼你的状态

this.state._code

您的状态变量的名称必须相同，因此请更改您的状态变量或调用以使其匹配：

this.state = 
  clients: [],
  Code: this.props.match.params.Code
;

axios.get('http://localhost:4000/app/viewclient/' + this.state.Code)

【讨论】：

当我把它放在 View Class 上时，它返回：Request URL: http://localhost:4000/app/viewclient/undefined Request Method: GET Status Code: 304 Not Modified Remote Address: [::1]:4000 Referrer Policy: no-referrer-when-downgrade

HTTP 状态码 304 表示Indicates that the resource has not been modified since the version specified by the request headers If-Modified-Since or If-None-Match. In such case, there is no need to retransmit the resource since the client still has a previously-downloaded copy.。另外我忘了提到你应该在 componentDidMount 上调用它。

是的，我把它放在componentDidMount() 上，但是我该如何解决呢？

抱歉错字：不在 componentDidMount() 中，因为没有可用的状态

我解决了，正如您在我的回答帖子中看到的那样，谢谢@MaddEye

【参考方案2】：

在我编辑的类视图中：

constructor(props) 
        super(props);
        this.state = 
            clients: [],
            Code: props.match.params.Code
        ;
componentDidMount() 
        axios.get('http://localhost:4000/app/viewclient/' + this.props.match.params.Code).then(function(response) 
            if (response.status >= 400) 
                throw new Error("Bad response from server");
            
            return response.json();
        ).then(function(data) 
            if (data === "success") 
                this.setState( msg: "User has been deleted." );
            
        ).catch(function(err) 
            console.log(err)
        );
    

这使它运作良好。