javascript - React setState 函数的小问题

Question

我实际上不知道为什么这不起作用，因为我比平时花了更多的时间来解决它。问题是我正在使用 axios 进行 REST 调用来获取要渲染的数据。在处理响应的 block 内，即使我能够检索数据，“this”对象不知何故无法引用正确的对象，并且出现错误。我不知道为什么会发生这种情况，但我们将非常感谢任何帮助。

在下面发布我的代码片段。我尝试将其上下文保存在 axios 调用范围之外并使用新变量，但这也没有帮助。这是我在控制台中收到的错误

TypeError: _this2.setState is not a function

import React, {Component} from 'react';

import axios from 'axios';

import './RouteList.css';

class RouteList extends Component{
constructor(){
    super();        
    this.setState = {
        allRoutes: {},
        selectedRoutes: {}
    };
    }    

componentDidMount(){
    const that = this;
    //Retrieve the SF-Muni route list        
    axios.get('http://webservices.nextbus.com/service/publicJSONFeed?command=routeList&a=sf-muni')
        .then(response => {
            console.log(response);
            that.setState({ allRoutes: response.data.routes });
        })
        .catch((error) => {
            console.log(error);
        });            
}

render(){
    return (
        <div className="transit-routes">
            {/*TODO-Code to render data.*/}
        </div>
    );
}
}
export default RouteList;`

Answer 1

问题是您正在重写构造函数中的 setState 方法，请尝试像这样设置初始状态:

this.state = {
    allRoutes: {},
    selectedRoutes: {}
};

此外，当使用箭头函数时，无需保存父作用域，该函数将在与外部函数相同的作用域下运行。