如何在渲染和存储会话之前进行 axios 调用？答案

【问题标题】：How can I make an axios call before rendering and store a session?如何在渲染和存储会话之前进行 axios 调用？
【发布时间】：2019-01-27 06:57:34
【问题描述】：

我已经尝试了很多教程，到目前为止，我可以显示项目并了解一点 React。

网址结构是

/works/2

查询字符串2存储在pageID内部

然后我触发 ajax 调用并过滤数据库以仅显示带有 .find() 的数据

这是WorksPage.js 文件，它将列出公司的工作组合项目。

import React, { Component } from 'react';
import axios from 'axios';
import './index.css';

class WorksPage extends Component {

    constructor(props) {
        super(props);
        this.state = {itemList: []};
    }

    componentWillMount(){
        const pageID = this.props.match.params.page;
        axios.get('/api/works.json').then(function(response){
            const result = response.data.find(i => i.id === pageID);
            this.setState({ isLoaded: true, itemList: result });
        }.bind(this));
    }

    componentDidMount() {
        window.scrollTo(0, 0);
    }

    render(){
        return(

            <div className="workListing pageWrapper">
                <section className="workListing-process">
                    <div className="smcontainer center txtc">
                     {this.state.itemList}
                     App Type: {this.state.itemList.sub}

                     App cars: {this.state.itemList.cars.map((car, i) =>

                      <div key={i}>
                        {car}
                      </div>

                    )}

                    </div>
                </section>
            </div>
        )
    }

}


export default WorksPage;

works.json 我的 JSON 是

[{
    "id": 0,
    "img": "/images/slider.jpg",
    "header": "GPS Module",
    "sub": "iOS",
    "link": "/works/0",
    "cars":[ "Ford", "BMW", "Fiat" ]
}{
    "id": 1,
    "img": "/images/map-slider.jpg",
    "header": "GPS Mapping Vectors",
    "sub": "iOS",
    "link": "/works/1",
    "cars":[  ]
},{
    "id": 2,
    "img": "/images/slider.jpg",
    "header": "GPS Module",
    "sub": "Android",
    "link": "/works/2",
    "cars":[ "Ferrari", "BMW", "Land Rover" ]
}]

到目前为止，{this.state.itemList} 返回空白。汽车列表循环也不起作用。如果我在this.setState 之后执行console.log，Console.log 将返回result 的数据

【问题讨论】：

我曾经遇到过类似的情况，因为 axios 的 then() 钩子不允许我访问 this。所以我通过在 axios 调用之前放置 let self = this 并在 then () 块中使用 self.setState() 来解决这个问题。另外，您在浏览器的开发工具面板下的网络选项卡上看到了什么以响应此获取请求？
没有任何错误。字符串到整数的解决方案有效:)

标签： javascript reactjs axios react-state-management

【解决方案1】：

首先，不要使用componentWillMount，它既是deprecated，又不是用来调用API的。请改用 componentDidMount。

我认为问题在于pageID 是字符串而id 是数字，因此没有匹配。在比较之前尝试将pageID 转换为数字。

const pageID = parseInt(this.props.match.params.page, 10);

【讨论】：

我应用了这个解决方案还添加了this 关键字，所以我可以参考@jsDevia 所写的内容。我也用componentDidMount..谢谢！

【解决方案2】：

你在回调函数中使用'this'关键字，它指的是回调本身而不是组件。并且还使用componentDidmount，不再使用componenwillmount。看这里：componentWillMount

使用这个：

componentDidMount(){
        let that = this;
        const pageID = this.props.match.params.page;
        axios.get('/api/works.json').then(function(response){
            const result = response.data.find(i => i.id === pageID);
            that.setState({ isLoaded: true, itemList: result });
        };
    }

【讨论】：