Confused about component redraws (and keys) about mithril.js HOT 8 CLOSED

Ok, that fixed it! Thank you!

Might seem like a dumb thing to not have tried onbeforeupdate, but I used the debugger to check if the state was correct on redraw. oninit was getting called and the state was getting updated correctly so I assumed the problem must be elsewhere.

from mithril.js.

Sorry, the problem is worse than I thought. I removed a bit of complexity from the snippet above. The code is really more like:

  view: (v: Vnode<myAttrs, myState>) => (
  <>
      <Title {...v.attrs} />
      <div style="margin:8px 0;display:inline-block;">
        {v.state.range.map((info, i) => (
          <button
            style={myStyle}
            onclick={() => {
              handleClick(); }}
          >
            {getButtonLabel(v.attrs, v.state)}
          </button>
        ))}
      </div>
  </>
  ),

Just discovered that even though v.state is updating as expected, <Title ...>, which is based on v.state, doesn't redraw either. But for whatever reason, but button labels do redraw which is why I was confused.

So, it's not a key problem.

I guess my real question is: how do I force a component to redraw itself when it's state changes? Most of the time everything works as expected, but sometimes there appears to be nothing you can do to convince a component to redraw on state change.

Using a key on a parent node seems to work, but in this case using a key is impractical. (I seem to get an endless supply of "use a key on one, use a key on all" errors.)

from mithril.js.

are you using m.render() (i.e. m.render() does not autoredraw)? see autoredraw, which is applied when using am.mount() or m.route().

from mithril.js.

I'm using m.route(). As mentioned, in all other places autoredraw is working as expected.

from mithril.js.

It looks like in Title you're only deconstructing v.attrs, not v.state?

from mithril.js.

Correct. v.state is updated to reflect the current v.attrs, which happens in oninit.

from mithril.js.

Ok, not sure I understand completely how things are done, but oninit only runs once when the component is created, not when redraws happen. If you'd want it to happen before every (re)draw of the view, use onbeforeupdate.

from mithril.js.

Closing. Thanks again!

from mithril.js.