React - setState(...): 只能更新一个挂载或挂载的组件答案

【问题标题】：React - setState(...): Can only update a mounted or mounting componentReact - setState(...): 只能更新一个挂载或挂载的组件
【发布时间】：2017-08-12 01:51:45
【问题描述】：

在使用 react-router 的辅助组件内部时，我收到 setState 错误。任何人都可以在我的代码中看到任何问题吗？

import React, { Component } from 'react';
import { Row, Col } from 'react-bootstrap';
import { Card, CardTitle, CardText } from 'material-ui/Card';
import './App.css';

class Dashboard extends Component {
  constructor(props) {
    super(props);
    this.state = {
      info: []
    };
    this.setInfo = this.setInfo.bind(this);

    this.setInfo();
  }

  setInfo = () => {
    var info = [
      {
        id: 0,
        title: 'Server Space',
        subtitle: '',
        textContent: ''
      },
      {
        id: 1,
        title: 'Pi Space',
        subtitle: '',
        textContent: ''
      }
    ];
    this.setState({ info: info });
  }

  render() {
    return (
      <div>
        <h2>Info</h2>
        <Row>
          {this.state.info.map((inf) => {
            return (
              <Col xs={12} md={4} key={inf.id}>
                <Card className="card">
                  <CardTitle title={inf.title} subtitle={inf.subtitle} />
                  <CardText>{inf.textContent}</CardText>
                </Card>
              </Col>
            )
          })}
        </Row>
      </div>
    )
  }
}

export default Dashboard;

这会导致：

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 Dashboard component.

有问题的线路是this.setState({ info: info });

【问题讨论】：

标签： javascript reactjs ecmascript-6 components state

【解决方案1】：

你不应该在构造函数中调用this.setState。可以直接设置状态：

var info = [
  {
    id: 0,
    title: 'Server Space',
    subtitle: '',
    textContent: ''
  },
  {
    id: 1,
    title: 'Pi Space',
    subtitle: '',
    textContent: ''
  }
];

class Dashboard extends Component {
  constructor(props) {
    super(props);
    this.state = {
      info: info
    };
    this.setInfo = this.setInfo.bind(this);
  }

  setInfo = () => {
    this.setState({ info: info });
  }
  ...

【讨论】：

谢谢。我很困惑为什么这不能像以前那样工作，但我意识到我正在使用 superagent 并在异步结束函数中调用 setState
感谢分享，不适用于我的用例。这就是我所拥有的 constructor(props) { super(props); this.state = { data : this.props.cryptos, isLoading : false }; setInterval(() => { this._query(query); }, 6000); }; _handleResponse(response) { this.setState({ data : response, isLoading : false }); }; _query(query) { this.setState({ isLoading: true}); fetch(query) .then(response => response.json()).then(json => this._handleResponse(json)) .catch(error => this.setState({ isLoading: false, message: '错误:' + 错误 })); };
我发现卸载组件时需要清除间隔，这是关于间隔的好文章reactnativequickly.com/book/chap07.html

【解决方案2】：

组件constructor在组件被挂载之前被调用，所以你不能在其中调用setState（setState只能在挂载的组件上调用）。构造函数是初始化状态的正确位置，但您应该直接设置状态：

constructor(props) {
  super(props);
  var info = [...];
  this.state= {
    info: info
  };
}

请注意，在 constructor 之外，您永远不应该直接设置状态 - constructor 是您可以这样做的唯一例外。

【讨论】：