javascript - Warning : setState(. ..): Can only update a mounted or mounting 组件

Question

我无法摆脱这个错误。当我从数组中删除一项并更新状态时，就会发生这种情况。

经过一些调试，我发现如果我重新加载应用程序，直接进入这个屏幕并删除，错误不会显示。但是，如果我导航到此屏幕，返回，然后再次转到此屏幕并删除，则会出现错误。如果我加载屏幕 10 次，我将得到 (30) 个这样的错误。

我的猜测是当弹出路由返回仪表板时我没有关闭 firebase 连接。或者我正在使用的导航器没有正确卸载场景。或者deleteRow()函数有问题

我真的不知道我还能做什么。同样的问题遍布整个网络，但似乎不适用于我的场景。

  constructor(props) {
    super(props);
    this.state = {
      dataSource: new ListView.DataSource({
        rowHasChanged: (row1, row2) => row1 !== row2,
      }),
    };

    const user = firebase.auth().currentUser;
    if (user != null) {
      this.itemsRef = this.getRef().child(`Stores/${user.uid}/`);
    } else {
      Alert.alert('Error', 'error!');
    }
    this.connectedRef = firebase.database().ref('.info/connected');
  }

  componentWillMount() {
    this.connectedRef.on('value', this.handleValue);
  }

  componentWillReceiveProps() {
    this.connectedRef.on('value', this.handleValue);
  }

  componentWillUnmount() {
    this.connectedRef.off('value', this.handleValue);
  }

  /*eslint-disable */
  getRef() {
    return firebase.database().ref();
  }
  /*eslint-enable */

  handleValue = (snap) => {
    if (snap.val() === true) {
      this.listenForItems(this.itemsRef);
    } else {
      //this.offlineForItems();
    }
  };

  listenForItems(itemsRef) {
    this.itemsRef.on('value', (snap) => {
      const items = [];
      snap.forEach((child) => {
        items.unshift({
          title: child.val().title,
          _key: child.key,
        });
      });
      offline2.save('itemsS', items);
      this.setState({
        dataSource: this.state.dataSource.cloneWithRows(items),
      });
    });
  }

  offlineForItems() {
    offline2.get('itemsS').then((items) => {
      this.setState({
        dataSource: this.state.dataSource.cloneWithRows(items),
      });
    });
  }

  deleteConfirm(data, secId, rowId, rowMap) {
    Alert.alert(
        'Warning!',
        'Are you sure?',
      [
          { text: 'OK', onPress: () => this.deleteRow(data, secId, rowId, rowMap) },
          { text: 'Cancel', onPress: () => this.deleteCancel(data, secId, rowId, rowMap) },
      ]
    );
  }

  deleteCancel(data, secId, rowId, rowMap) {
    rowMap[`${secId}${rowId}`].closeRow();
  }

  deleteRow(data, secId, rowId, rowMap) {
    rowMap[`${secId}${rowId}`].closeRow();
    this.itemsRef.child(data._key).remove();
    offline2.get('itemsS').then((items) => {
      const itemsTemp = items;
      let index = -1;
      for (let i = 0; i < itemsTemp.length; i += 1) {
        if (itemsTemp[i]._key === data._key) {
          index = i;
        }
      }
      if (index > -1) {
        itemsTemp.splice(index, 1);
      }
      // Decrement stores counter
      offline2.get('storesTotal').then((value) => {
        const itemsReduce = value - 1;
        this.setState({ storesValue: itemsReduce });
        offline2.save('storesTotal', itemsReduce);
      });

      offline2.save('itemsS', itemsTemp);
      this.setState({
        dataSource: this.state.dataSource.cloneWithRows(itemsTemp),
      });
    });
  }

Answer 1

问题是他们提到的，但没有提供解决方案。经过一段时间和一些外部帮助，这解决了我的问题:只需删除监听器即可。

  componentWillUnmount() {
    this.itemsRef.off(); // this line
    this.connectedRef.off('value', this.handleValue);
  }