getInitialState -> componentWillMount order is not preserved

[endragor]

react-mixin makes mixin's getInitialState wrapped into componentWillMount and called after the mixin's original componentWillMount.
Normally, state is initialized from getInitialState before componentWillMount is called, and so componentWillMount is able to rely on the initialized state.

As an example, this breaks Formsy.Mixin that uses this.state from componentWillMount.

[brigand]

Doing it in componentWillMount is necessary because getInitialState just doesn't exist, and we can't augment the constructor.

I think the fix here is manually merging state in componentWillMount rather than using setState, and doing it before calling the actual componentWillMount functions.

A PR would be very appreciated; it's going to be a little while before I have time to do this and fix up the tests.

[brigand]

@endragor does 1.2.1 work for you?

[endragor]

Right now - no, it doesn't, because of bug in React: facebook/react#1740
Changing this.setState(getInitialState.call(this)) to this.state = merge(this.state, getInitialState.call(this)) made it working (merge is self-written).

[brigand]

@endragor I think it's fixed.

import React from 'react';
import reactMixin from 'react-mixin';

var Mixin = {
  getInitialState(){
    return {'foo': 'bar'};
  },
  componentWillMount(){
    console.log(JSON.stringify(this.state, null, 4));
  }
}

class C extends React.Component {
  constructor(){
    this.state = {'baz': 'quux'};
  }
  render(){
    return <div />;
  }
}

reactMixin.onClass(C, Mixin);

React.renderToString(<C />);

// stdout
{
    "baz": "quux",
    "foo": "bar"
}

The only concern is how duplicate keys are handled, I don't think it's done correctly currently.

[endragor]

@brigand thanks!