DropDown Menu warning.js:44 Warning: setState(...)

[KingWu]

I try to use a dropdown menu to handle switch language feature. I use the following code to handle switch language

window.AppState = {
  container: document.getElementById('app'),

  getLocale: function() {
    return localStorage.getItem('locale') || 'en';
  },

  setLocale: function(lang) {
    localStorage.setItem('locale', lang);
  },

  render: function() {
    var locale = this.getLocale();

    ReactDOM.render((
      <Provider store={appStore}>
        <MuiThemeProvider muiTheme={getMuiTheme()}>
          <IntlProvider locale={locale} messages={message[locale]}>
            <AppRoute />
          </IntlProvider>
        </MuiThemeProvider>
      </Provider>
    ), this.container);
  },

  unmount: function() {
    ReactDOM.unmountComponentAtNode(this.container);
  },

  rerender: function() {
    this.unmount();
    this.render();
  }
};

This is my React Component

class MainContainer extends React.Component{

  constructor(props, context)
  {
    super(props, context);
    console.log('-- MainContainer constructor ---');
    this.handleChange = this.handleChange.bind(this);

    this.state = {
      value: 1
    };
  }

  handleChange(event, index, value){

    var local = value == 1 ? 'en' : 'zh';

    window.AppState.setLocale(local);
    window.AppState.rerender();
  }

  render(){
    console.log('-- MainContainer render ---');

    const whiteColor = {color: '#FFF'};

    return (
      <div>
        <DropDownMenu value={this.state.value} onChange={this.handleChange} labelStyle={whiteColor}>
          <MenuItem value={1} primaryText="English" />
          <MenuItem value={2} primaryText="中文" />
        </DropDownMenu>
      </div>
    )
  }
}

When i switch language, when get the warning message.

warning.js:44 Warning: setState(...): Can only update a mounted or mounting component. This usually means you called setState() on an unmounted component. This is a no-op. Please check the code for the undefined component.

i guess the DropDown meun after finished animation, will set its state?

[johvin]

@KingWu, I have encounterd the same problem, and finally I found the cause of the problem.

it's my webpack config. Part of that is as follows.

// appEntry.js

test: /\.jsx?$/,
include: [
  path.resolve(__dirname, '../src'),
],
loader: 'babel-loader',
query: {
  cacheDirectory: DEBUG,
  babelrc: false,
  presets: [
    'es2015-node',
    'react',
    'stage-0'
  ],
  plugins: [
    'transform-runtime',
    'transform-object-rest-spread',
    'transform-decorators-legacy',
    ...DEBUG ? [] : [
      'transform-react-remove-prop-types',
      'transform-react-constant-elements',
      'transform-react-inline-elements'
    ]
  ]
}

The version of node is 5.10.0, and I made a mistake and misused the presets configuration of babel-loader, confusing the usage of configuration between appEntry and node. So I replaced 'es2015-node' with 'es2015' and everything was all right.

[mpontikes]

@KingWu Can this issue be closed by @johvin 's solution?