react-easy-state: Problem with re-rendering not triggered

I am using this amazing library but I have encountered a problem and can’t wrap my head around it:

I have this snippet in a big complex component:

  replaceAll = () => {
    if (store.currentObject.replaceData) {
      const replaceData = store.currentObject.replaceData;

      Object.keys(replaceData).forEach(placeholder => {
        store.currentObject.content = store.currentObject.content.replace(
          `"${this.placeholderImage}" data-img-id="${placeholder}"`,
          `${replaceData[placeholder]}`
        );
        store.currentObject.html = store.currentObject.html.replace(
          `"${this.placeholderImage}" data-img-id="${placeholder}"`,
          `${replaceData[placeholder]}`
        );
      });
    }
  };

The store.currentObjectis used in the render method of the component, and it works in all the scenario. But when I do this replace, the changes does not trigger a re-render… what am I missing?

About this issue

Original URL
State: closed
Created 5 years ago
Comments: 26 (11 by maintainers)

Most upvoted comments

No advantages now @solkimicreb , it was just a leftover from previous coding like:

export default ({ lang }) => <ContextConsumer>{ Intro }</ContextConsumer>

as it allowed me then to git grep ContextConsumer and quickly review where I was using the context component… pretty useless now! 😃

klausbert on Feb 6, 2019

Hi @ciaoben , Indeed I have rewritten this component and others in a similar fashion you show above, and it also worked:

export default view(({ lang }) => {
	if (! state.intro.head) state.getIntro(lang)

	return <Intro />
})

It also looks elegant IMO… thanks!

klausbert on Feb 4, 2019

Hi there! I started testing react-easy-state in one component and had to face a similar problem, that is no re-rendering after an async api call. Long story short I’ve just solved it with a tip from a different use case I found elsewhere. Basically after I added a key prop, the corresponding snippet re-renders on key changes.

So now my component ends with:

export default view(({ lang }) => (<Intro key={ state.intro.head } lang={ lang } />))

Inside <Intro /> I call an async function that updates the contents of state.intro.head which is initially empty.

Hope this helps!

Now that I solved it I intend to replace more bits of code I am still holding into a Context module. Cheers, Klaus

klausbert on Feb 2, 2019

No problem for the slow answer, thank you instead! Tomorrow I will return to work on that codebase and will try to extract some real code to send you.

On Mon, 21 Jan 2019 at 17:39, Miklos Bertalan notifications@github.com wrote:

Hi!

I answered the issue in the observer-util lib. In a nutshell: I will need some more code to help you, if you can provide it. (What I really need is the exact place where you mutate the data and where you use the data in the render.)

Sorry for the slow answer, I was pretty busy recently.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/solkimicreb/react-easy-state/issues/73#issuecomment-456134259, or mute the thread https://github.com/notifications/unsubscribe-auth/AEUP7W-yvEZ0OZTmORIx8RwV2L-4kuRmks5vFe1AgaJpZM4aAvcR .

– Ben

ciaoben on Jan 21, 2019