时间戳

首页 > 解决方案 > React Native：当用户单击发送按钮而不刷新时显示消息

react-native - React Native：当用户单击发送按钮而不刷新时显示消息

问题描述

我只使用状态创建了一个简单的聊天应用程序系统。

class Messages extends React.Component {
  constructor(props) {
      super(props)
      this.state = {
        msg: [], //all messages in db
        msgS: '', // message send on click
      }
  }
  async sendMsgS() {
      let formData = new FormData();
      formData.append('key', '***'); // API key
      formData.append('userId', '1');
      formData.append('msg', this.state.msgS);
    try {
      let response = await fetch('https://www.globalfidelio.com/gfn_arcol/api/send_msg.php',{
        method: 'POST',
        headers: {
          'Accept': 'application/json',
          'Content-Type': 'multipart/form-data'
        },
        body: formData
      });

      let res = await response.json();

      if(response.status >= 200 && response.status < 300 ) {

        console.warn("message envoyé " + res.message);

      } else {
        let errors = res;
        throw errors;
      }

    } catch (errors) {
        console.warn("error msg is_  " + errors);
    }
  };
  onPressSend() {
    this.sendMsgS().then(() => {
      this.setState({msgS: ''})
    });
    console.log(this.state.msg.Conversation.reverse());
  }

  componentDidMount() {
    getMsgFromApi().then(data => {
      this.setState({ msg: data})
    });

  };

它工作正常，但是当我单击 sen 按钮时，我必须刷新以显示我发送的消息，我想要它显示我发送的消息而不刷新。我不知道我该怎么做

标签： react-native

解决方案

这是反应行为。如果你改变状态，react 会调用 render 方法。为避免这种情况，您可以使用此生命周期方法：

shouldComponentUpdate(nextProps, nextState)

我看不到您的渲染方法以查看您如何显示味精。但是，如果不刷新（但警报），您将无法显示任何更改。

这里 shouldComponentUpdate 文档链接

推荐阅读