代码之家 › 专栏 › 技术社区 › TheBlackBenzKid

如何在呈现和存储会话之前进行axios调用?

react-state-management axios reactjs javascript

TheBlackBenzKid · 技术社区 · 6 年前

我试过很多教程,到目前为止,我可以显示项目,并得到一点周围的反应。

URL结构是

/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 是

[{
    "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} 返回空白。car list循环也不工作。Console.log将返回 result this.setState

2 回复 | 直到 6 年前

Pouria 6 年前

首先,不要使用componentWillMount,两者都是 deprecated 不是用来调用api的。改用componentDidMount。

我想问题是 pageID 是字符串和 id 页面ID

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

jsDevia 6 年前

在回调函数中使用“this”关键字,它引用回调本身而不是组件。请看这里: 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 });
        };
    }

推荐文章