javascript - 通过 API 响应过滤后，将 setState 读取为未定义

Question

这个问题已经有答案了:

How to access the correct `this` inside a callback (15 个回答)

How does the "this" keyword work, and when should it be used? (22 个回答)

已关闭 4 年前。

我试图在 React 中过滤对某些新闻项的 api 响应，但是当我调用 setState 函数时，我的控制台抛出错误，指出它无法 setState of property undefined。我是 React 新手，所以如果这是一个明显的修复，请原谅。

    class LeagueTables extends Component {
        constructor(props) {
            super();
            this.state = {
                sportsNewsFiltered: []
            };
            this.mountNews = this.mountNews.bind(this);
        }
        mountNews() {
            var tempArr = [];
            var urlNews =
                "https://newsapi.org/v2/top-headlines?sources=bbc- 
                  sport&apiKey=" + SECRETS.API_KEY;
            var reqNews = new Request(urlNews);
            fetch(reqNews)
                .then(response => response.json())
                .then(function(json) {
                    for (var i = 0; i < json.articles.length; i++) {
                        if (json.articles[i].url.includes("football")) {
                            tempArr.push(json.articles[i]);
                         }
                    }
                })
                .then(function() {
                        this.setState({
                        sportsNewsFiltered: tempArr
                    });
                });
         }
        componentDidMount() {
            this.mountNews();
        }

Answer 1

您将失去此上下文，因此请将其更改为箭头函数

  .then(() => {
                    this.setState({
                    sportsNewsFiltered: tempArr
                });
            });