Question

我试图在我的应用程序中创建聊天。消息存储在服务器中，我通过API与之通信。我尝试进行实时聊天，因此我使用了componentDidUpdate shouldComponentUpdate方法（componentDidUpdate和componentwillupdate），但是出现了一条警告，告诉我使我的应用程序非常实用弱...无论如何我都不能做到这一点。

我希望建议能够在用户单击发送按钮时显示该消息，以及如何通知收到新消息

Answer 1

如果您的服务器未发送有关新消息的通知，则可以实施轮询机制，以在某些较小的时间间隔后检查服务器是否有新消息。只要使用redux提取并填充新消息，您将只需要componentwillreceiveprops方法即可用于设置新消息数组的状态。

Answer 2

警告可能来自“不安全”（在React 17中已弃用）方法componentwillupdate。这些方法（包括componentwillreceiveprops，如Firdous所述）不应再优先使用componentdidupdate之类的方法。

您想要实现的目标可以通过适当使用componentdidupdate以及必要时使用getderivedstatefromprops来完成。例如，如果您已将聊天视图（和消息文本输入）连接到redux（应保留消息），则componentdidupdate方法将侦听传入的prop更改（例如，来自onPress事件的文本输入）），因此可以使用新的道具（消息）来更新视图。

Answer 3

我提供了一些代码以提供更多详细信息：

componentDidUpdate(prevProps, prevState) {
  if (prevState.msg !== this.state.msg) {
    this.getMsgFromApi(this.state.userId).then(data => {
      this.setState({ msg: data})
    });
  }
};

并在安装组件时显示消息，我这样做：

componentWillMount() {
  AsyncStorage.getItem(USERID_STORED)
    .then(userIdStore => {
        this.setState({ userId: userIdStore});
        this.getMsgFromApi(this.state.userId).then(data => {
          this.setState({ msg: data})
        });
    });
};

所有消息均已发布到平板列表中

    <View style={Styles.messagesContainer}>
      <FlatList
        style={Styles.flatlist}
        data={this.state.msg.Conversation}
        keyExtractor={(item) => item.datetime.toString()}
        renderItem={({item}) => <MsgR msg={item}/>}
        inverted= {-1}
      />
    </View>

并且我做了一个条件来区分是用户消息还是接收到的消息，因为处理消息的API如下所示：

"Conversation": [
{
"adherent": "received message",
"user": null,
"datetime":"2019-07-09
09: 42: 55"
},
{
"adherent":null,
"user":"user message",
"datetime":"2019-07-04 06: 14: 18"
}
2","user":null,"datetime":"2019-07-03 12: 34: 10"
},
]

根据发件人显示消息：

const msg = this.props.msg;
return (
    <View style={[Styles.container, msg.user===null ? Styles.right : Styles.left]}>
      <Text style={msg.user===null ? Styles.textMsgRight : Styles.textMsgLeft}>{msg.user===null ? msg.adherent : msg.user}</Text>
    </View>
);

Answer 4

我通过添加extraData Flatlist属性找到了解决方案：

      <FlatList
        style={Styles.flatlist}
        data={this.state.msg.Conversation}
        keyExtractor={(item) => item.datetime.toString()}
        extraData={this.state} //this prop
        renderItem={({item}) => <MsgR msg={item}/>}
        inverted= {-1}
      />

当我单击发送按钮时，我会重新调用getMsgFromApi()方法：

onPressSend() {
  AsyncStorage.getItem(USERID_STORED)
      .then(userIdStore => {
              this.setState({ userId: userIdStore});
              this.sendMsgS(this.state.userId).then(() => {
                this.setState({msgS: ''});
this method --> this.getMsgFromApi(this.state.userId).then(data => {
                  this.setState({ msg: data,});
                });
              });
      });
}

并且工作正常：当我单击“发送”按钮时，几秒钟后我就显示了已发送的消息，虽然不愉快，但是可以正常工作！

React Native：单击按钮刷新组件

4 个答案: