React - setState（...）：マウントされているコンポーネントまたはマウントされているコンポーネントのみをアップデートできます

Question

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; 

これは、その結果：問題の行は、あなたがコンストラクタでthis.setStateを呼び出すことになっていませんthis.setState({ info: info });

Answer 1

ある

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. 

。 あなたは直接の状態を設定することができます。

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 }); 
    } 
    ... 

Answer 2

コンポーネントconstructorが呼び出された部品が実装される前に、あなたはそれでsetState呼び出すことはできませんので（setStateを搭載部品にのみ呼び出すことができます）。コンストラクタは状態を初期化するための適切な場所ですが、あなたは直接の状態を設定することによってそれを行う必要があります。

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

外constructorあなたが直接状態を設定することはありませんので、ご注意ください - constructorすることは、あなたがそれを行うことができます唯一の例外です。