React 마운트 해제 된 구성 요소에 대한 기본 setState() 경고

Question

"setState (...) : 탑재 된 또는 탑재 된 구성 요소 만 업데이트 할 수 있습니다."라는 경고 메시지가 나타납니다. 이 구성 요소가 포함 된 화면에서 다른 곳으로 이동 한 다음 다시 탐색하여 메시지를 보내려는 경우 비슷한 문제가있는 다른 게시물을 읽었지만 비동기 콜백을 위해 리스너를 제거하는 경향이 있습니다. 여기에서 문제를 일으키는 코드는 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

소품은 React에서 변경할 수 없습니다. 소품을 sendMessage 함수에 전달한 다음 수정합니다.

이러한 소품을 수정하면 구성 요소가 마운트 해제 된 다음 구성 요소의 새 인스턴스가 새 소품과 함께 마운트됩니다. 이 모든 것은 sendMessage의 마지막 setState 전에 발생합니다. 따라서 setState에 도달하면 최근에 마운트 해제 된 버전의 구성 요소를 수정하려고 시도하고 있습니다.

chatRef을 생성자 내의 상태로로드 해보십시오. chatRef에 대한 모든 후속 참조를 소품이 아닌 상태 인스턴스에서 가져오고 setState 호출로 수정해야합니다.