は警告に反応：SETSTATE（...）が唯一のマウントまたはマウント部品

Question

を更新することができます私は問題を抱えている：私が反応/ ReactNative +フラックスと私の最初のアプリを構築していると私は、この警告入手：

をsetState（...）：マウントされたコンポーネントまたはマウントされているコンポーネントのみを更新できます。この は、通常、マウントされていないコンポーネントに対してsetState（）を呼び出したことを意味します。これは、 ノーオペレーションです。定義されていないコンポーネントのコードを確認してください。私のコードの上

：

​​

あなたは、私は非常に単純な方法であなたの映画のリストを表示しています見ることができるように。ビューを変更するスニペットを表示します。私の問題は、私のアプリで、ページを表示しているページから表示情報に変わるページを変更したときに発生します。

class TabsView extends React.Component { 

    //do stuff... 

    renderContent() { 
    switch (this.state.tab) { 
     case 'List Movies': 
     return <ListMoviesView/>; 

     case 'Info': 
     return <InfoView/>; 

    } 
    } 

    render() { 
    return (
     <View style={styles.content} key={this.state.tab}> 
      {this.renderContent()} 
     </View> 
    ); 
    } 
} 

module.exports = TabsView; 

私は（問題が住んでいるので）最初のスニペットの関数_onChange（）でのログを（）入れて、ときに私がページを変更したときに関数が複数回呼ばれ、上記の警告を取得しています。どのようにそれを修正できますか？どこが間違っていますか？ありがとう！

Answer 1

あなたのを追加し、イベントリスナー関数を削除のそれぞれに新しい関数インスタンスを提供しています。したがって、別の関数インスタンスを対象としているため、removeは意図したとおりには機能しません。変更イベントはイベントを起動します。

this.setState呼び出しのスコープを維持するために、匿名関数を追加/削除イベントリスナーに渡していたと思います。

componentDidMount() { 
     ApiListMovies.getMovies(); 
     ListMoviesStore.addChangeListener(this._onChange); 
    }; 

    componentWillUnmount() { 
     ListMoviesStore.removeChangeListener(this._onChange); 
    }; 

    // We use anonymous function bound to the class property, this 
    // will maintain our scope. 
    _onChange =() => { 
     console.log(this.state); 
     this.setState({ 
      dataSource: this.state.dataSource.cloneWithRows(ListMoviesStore.getListMovies()), 
      loaded: true 
     }); 
    }; 

注：上記の提案であるclass properties syntaxとに依存しているあなたはそうのように、呼び出しを削除/クラスプロパティにバインドされた匿名関数を使用してスコープを維持し、その後、単にあなたのアドオンでプロパティを参照することができます現時点では、バベルステージ1を介してイネーブルされている。これがない場合は、コンストラクタ呼び出し内で関数を作成することができます。ように：

class ListMovies extends React.Component { 
    constructor(props) { 
    this.state = { 
     dataSource: new ListView.DataSource({rowHasChanged: (row1, row2) => row1 !== row2}), 
     loaded: false 
    }; 

    // We use anonymous function bound to the class property, this 
    // will maintain our scope. 
    this._onChange =() => { 
     console.log(this.state); 
     this.setState({ 
      dataSource: this.state.dataSource.cloneWithRows(ListMoviesStore.getListMovies()), 
      loaded: true 
     }); 
    }; 
    } 

    componentDidMount() { 
    ApiListMovies.getMovies(); 
    ListMoviesStore.addChangeListener(this._onChange); 
    }; 

    componentWillUnmount() { 
    ListMoviesStore.removeChangeListener(this._onChange); 
    };