Call componentDidMount when API responds

Question

In my project I have a call to an action that makes a webservice call and in turn dispatch actions to the result of the ws, these actions edit the store. My problem is in :

ComponentDidUpdate () {
    If (this.props.messages.length) {
      Const items = this.props.messages.filter (this.isDisplayable);
      This.timer = setInterval (() => {
        If (items.length> 0) {
          This.props.popItem (items);
        } Else {
          ClearInterval (this.timer);
        }
      }, This.props.interval);
    }
  }

In fact it is launched several times and I have warnings of

Warning: flattenChildren (...): Encountered two children with the same key, 1. Child keys must be unique; When two children share a key, only the first child will be used.

I used the componentDidMount but it launches it before api responds.

my question is: Is that there is a way to update the component only at the response of my action, or alternatively to pass the warnings ?

The same problem: [http://stackoverflow.com/questions/33391205/warning-flattenchildren-encountered-two-children](http://stackoverflow.com/questions/33391205/warning-flattenchildren-encountered-two-children) — Vitalii Andrusishyn, Feb 01 '17 at 15:31
What language is this? In JavaScript keywords are case-sensitive and there are no `If` or `Const`. — Pavlo, Feb 01 '17 at 15:31

prosti · Answer 1 · 2017-02-11T17:20:32.147

In my project I have a call to an action that makes a webservice call and in turn dispatch actions to the result of the ws, these actions edit the store.

None of the methods componentDidMount and componentDidUpdate are good. Observe the Store in Redux and update your component accordingly when the correct action TYPE is found.

Since you are using the Redux architecture, the state for all your components is in a single place — in the Store.

yes i know, but the problem is that componentDidUpdate is called several times which gives me the index error.

This is quite normal in React. Check this lifecycle.

What you should do is the govern the Redux architecture. I will try today to provide some diagrams for you. In general, anything you do will be from the global Store.

You may forget the React.Component state, and props you had in the non-Redux applications.

You typically need to use the Wrapper as a context provider around your app, where the context is the property of React.Component.

The context will be passed to all children and grandchildren so this will be the global Store organization.

Then you will need to read the Store from the context, and call the two typical methods: dispatch and subscribe.

yes i know, but the problem is that ComponentDidUpdate is called several times which gives me the index error :( — Hajji Tarik, Feb 01 '17 at 15:25
I tried to update a bit, I will provide more images @HajjiTarik. — prosti, Feb 01 '17 at 15:49

score 1 · Answer 2 · 2017-02-08T16:42:33.677

1

try this :

componentWillReceiveProps(nextProps) {
    if (this.props.messages === nextProps.messages) return;

edited Feb 08 '17 at 16:42

answered Feb 08 '17 at 16:35

score 1 · Answer 3 · answered Feb 11 '17 at 14:36

1

i had some probleme and i resolve it by force update

 forceUpdate () {
        If (this.props.messages.length) {
         ...
        }
      }

answered Feb 11 '17 at 14:36

Call componentDidMount when API responds

3 Answers3