Question

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

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按钮时，我必须刷新才能显示我发送的消息，而我希望它不刷新就显示我发送的消息。我不知道该怎么办

Answer 1

这是行为上的反应。如果更改状态，则应调用render方法。为了避免这种情况，您可以使用以下生命周期方法：

shouldComponentUpdate(nextProps, nextState)

我看不到您的render方法来查看如何显示味精。但是，如果没有刷新，您将无法显示任何更改（但会发出警报）。

在这里shouldComponentUpdate文档link

Answer 2

我通过添加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：用户单击发送按钮而不刷新时显示消息

2 个答案: