1

I am calling a function from the render method to fetch the updated data like this. but i am not getting the data on page because before getting the data my jsx is parsing . Here is my code

private fetchMessages = async () => {
const isArray = Array.isArray(this.props.messages);
let messagesData: any;

console.log(this.props.messages);
messagesData = this.props.messages;
if (!isArray) {
  const result = await this.props.messages.fetchByOffset({
    offset: null,
  });
  const results = result.results;
  messagesData = results.map((value: any) => {
    return value.data;
  });
}
return await messagesData;

};

in render function i am calling like this

 private getData() {
this.fetchMessages().then(messageResponse => {
  this.jetMessages = this.processCustomMessageArray(messageResponse);

  return new ArrayDataProvider<null, ojMessage.Message>(this.jetMessages);

});
return null;

}

render(props: Readonly<Props>): ComponentChild {
    this.jetMessagesDataprovider = this.getData();
    
    return (
      <div
        id={`${this.uid}_stickycontainer`}
        class="oj-sp-messages-banner-sticky-container"
      >
        <oj-messages
          id={`${this.uid}_messagecontainer`}
          messages={this.jetMessagesDataprovider}
          displayOptions={this.computedCategoryOption}
        >
          <template slot="messageTemplate" render={this.renderMessage} />
        </oj-messages>
      </div>
    );
  }
Roster
  • 1,764
  • 6
  • 17
  • 36
  • Can you offer a MRE? I see your code doesn't trigger the update function. Maybe this is the problem – Pablo LION Jan 11 '22 at 07:40
  • @Prablion No error , Just the messages are not displaying on the page. because jetMessagesDataprovider is getting null as jsx is parsing before returning the data from getData() method – Roster Jan 11 '22 at 07:49
  • Did you call [setState](https://reactjs.org/docs/react-component.html#setstate)? and your second code piece is lacking a `}` – Pablo LION Jan 11 '22 at 08:43

0 Answers0