未安装组件上的 React Native setState() 警告答案

【问题标题】：React Native setState() warning on unmounted component未安装组件上的 React Native setState() 警告
【发布时间】：2016-10-01 04:00:29
【问题描述】：

我收到警告“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 }

【问题讨论】：

标签： reactjs react-native

【解决方案1】：

Props 在 React 中是不可变的。您正在将一个道具传递给您的 sendMessage 函数，然后对其进行修改。

修改这些道具会导致组件卸载，然后使用新道具安装组件的新实例。这一切都发生在 sendMessage 中的最终 setState 之前。因此，当您达到该 setState 时，您正在尝试修改该组件最近卸载的版本。

尝试在构造函数中将chatRef 加载到您的状态中。然后从 state 实例而不是 props 中提取所有对 chatRef 的后续引用，并确保仅使用 setState 调用对其进行修改。

【讨论】：