マウントされていないコンポーネントのネイティブsetState（）警告

Question

「setState（...）：マウントされたコンポーネントまたはマウントされているコンポーネントのみを更新できます」という警告が表示されます。このコンポーネントを含む画面から離れてナビゲートしてメッセージを送信しようとすると、同様の問題を抱えた他のSO投稿を読んだことがありますが、それらはすべて非同期コールバックのリスナーを削除する傾向があります。ここで問題を引き起こすコードはsendMessage（）関数にあり、コールバックはありません。

私のコンポーネントが再マウントされない理由は明確ではありません。私はここで間違って何をしていますか？

import React, { Component } from 'react'; 

import { 
    StyleSheet, 
    Text, 
    TextInput, 
    View 
} from 'react-native'; 

class MessageEntry extends Component { 
    constructor(props) { 
    super(props); 

    this.state = { 
     content: '' 
    } 
    } 

    render() { 
    return (
     <View> 
     <TextInput ref="newMessageContent" 
      style={styles.input} 
      multiline={true} 
      placeholder="Ask me anything! :-)" 
      onChangeText={(content) => this.setState({content: content})} 
      value={this.state.content} 
     /> 

     <Text onPress={() => this.sendMessage(this.props.chatRef)} style={styles.button}>Send</Text> 
     </View> 
    ) 
    } 

    sendMessage(chatRef) { 
    if (this.state.content == '') { return false; } 
    chatRef.push({ 
     content: this.state.content, 
     sent_at: Firebase.ServerValue.TIMESTAMP, 
     self: true 
    }); 

    this.setState({content: ''}); 
    } 

} 

export { MessageEntry } 

Answer 1

小道具はリアクトでは不変です。あなたは、あなたのsendMessage関数に小道具を渡して、それを修正しています。

これらのプロップを変更すると、コンポーネントがアンマウントされ、コンポーネントの新しいインスタンスが新しいプロップでマウントされます。これはすべてsendMessageの最後のsetStateの前に発生します。したがって、そのsetStateに到達すると、最近マウントされていないバージョンのコンポーネントを変更しようとしています。

chatRefをコンストラクタ内の状態にロードしてみてください。その後、chatRefへのすべての参照は、小道ではなく州のインスタンスから引き出し、setState呼び出しでのみ変更するようにしてください。