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

查看此博客文章，了解解决此问题的另一种方法（但不是hackey）：http://jaketrent.com/post/set-state-in-callbacks-in-react/

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

其他：

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

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

React：只能更新已安装或安装的组件

1 个答案: