通过 API 响应过滤后，将 setState 读数反应为未定义

Question

我试图在 React 中过滤对某些新闻项的 api 响应，但是当我调用 setState 函数时，我的控制台抛出错误，它无法设置未定义的属性状态。我是 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
                });
            });

Answer 2

所以这在你的设置状态中指的是函数而不是你想要的反应class，要解决这个问题只需： () =>{...}

而不是：函数 () {...}

通过 API 响应过滤后，将 setState 读数反应为未定义

React setState reading as undefined after filtering through API response

javascript

state

setstate

reactjs

jsonapi-resources