I'm introducing Mobx in my React application. The application was not using any framework(Flux Redux, etc).
On each component i first inject the state using the inject
decorator of the mobx-react
package:
const React = require('react');
import {observer, inject} from 'mobx-react';
@inject('myState') @observer
class MyComponent extends React.Component{...}
On updates i change directly the state on the onChange method of the component, the state contains an array of objects(blocks
) and each block has some specific properties:
onChange = (event) => {
this.props.myState['blocks'][this.props.index][event.target.name] = event.target.value;
}
I then render the component using the value fetched from the state.
render = () => {
const value = this.props.myState['blocks'][this.props.index]['myInput'];
console.log('re rendering...');
return (
<div>
<textarea value={value}
onChange={this.onChange} />
</div>
);
}
But actually it seems like the render function is not triggered after the onChange
has been executed and the state myState
changed.
Any suggestions about how come the re render is not triggered even if the component is a state subscriber?