javascript - react : Can only update a mounted or mounting component

Question

这是我的组件:

var booksRef = new Firebase("https://bookshelf.firebaseio.com/books");

class BookShelf extends React.Component {
    constructor(props){
      super(props);
      this.state = {books: [] };
      var self = this;
      booksRef.on("value", function(snapshot){
        const newbooks = [];
        var firebaseBooks = snapshot.val();
        for(var bookId in firebaseBooks){
            newbooks.push({key: bookId, book: firebaseBooks[bookId]});
        }
        var newState = self.state;
        newState.books = newbooks;
        self.setState(newState);
      });
    }
   ...

当我第一次导航到这个组件时，没有问题。但是，当我导航到另一个组件然后再次返回到该组件时，我在控制台中收到以下警告:

Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the  component.

我想在处置该组件之前我需要做一些事情，但我不确定为什么。

Answer 1

对于你的问题，上面的类构造函数中的所有代码都是在安装其本质上:componentWillMount之前完成的，因此该逻辑仅在此时运行。

现在一切都很好，但是问题很复杂，请购买 Firebase 的异步请求。曾经有一个名为 isMounted 的方法，您只需运行检查即可，但现在该方法已弃用，此处概述了适合您的场景的最佳实践:https://facebook.github.io/react/blog/2015/12/16/ismounted-antipattern.html

查看这篇博客文章，了解解决该问题的另一种(但很黑客的)方法:http://jaketrent.com/post/set-state-in-callbacks-in-react/

滚动到 es6 部分，第一位不直接相关。

附加:

查看这篇 babel 博客文章:特别是有关类的部分:不确定您是否需要它，但它很好

https://babeljs.io/blog/2015/06/07/react-on-es6-plus