Reagieren und Material-UI: Uncaught unveränderliche Verletzung: removeComponentAsRefFrom (...)

Question

I Reagieren Komponenten-Material-UI entwickeln:

Dies funktioniert

MainView.js

import React, { Component } from 'react'; 
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; 
import { List, ListItem } from 'material-ui/List'; 

class MainView extends Component { 
    render() { 
    return (
     <MuiThemeProvider> 
     <List> 
      <ListItem primaryText="item 1" /> 
      <ListItem primaryText="item 2" /> 
      <ListItem primaryText="item 3" /> 
     </List> 
     </MuiThemeProvider> 
    ); 
    } 
} 

export default MainView; 

aber wenn ich <List> zu einer anderen Komponente verschiebe

MainView.js

import React, { Component } from 'react'; 
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; 
import MyListView from './MyListView'; 
// this import was removed as unused as <List> moved to MyListView: 
// import { List, ListItem } from 'material-ui/List'; 

class MainView extends Component { 

    render() { 
    return (
     <MuiThemeProvider> 
     <MyListView /> 
     </MuiThemeProvider> 
    ); 
    } 
} 

MyListView.js

import React, { Component } from 'react'; 
import { List, ListItem } from 'material-ui/List'; 

class MyListView extends Component { 

    render() { 
    return (
     <List> 
     <ListItem primaryText="item 1" /> 
     <ListItem primaryText="item 2" /> 
     <ListItem primaryText="item 3" /> 
     </List> 
    ); 
    } 
} 

export default MyListView; 

in diesem Fall erhalte ich diese:

Uncaught unveränderliche Verletzung: removeComponentAsRefFrom (.. .): Nur ein R eactOwner kann refs haben. Möglicherweise entfernen Sie eine Referenz zu einer Komponente , die nicht innerhalb der `render` -Methode einer Komponente erstellt wurde, oder Sie haben mehrere Kopien von React loaded (Details: link) .

main.js

ReactDOM.render((
    <Provider store={store}> 
    <Router history={hashHistory}> 
     <Route path="/" component={App} /> 
     <Route path="/test" component={MainView} /> 
    </Router> 
    </Provider> 
), document.getElementById('root')); 

Jeder Vorschlag, dies zu entkommen? Vielen Dank!

Answer 1

Ich sehe diesen Fehler, wenn ich eine Komponente zu einer Rendermethode hinzugefügt habe, die entweder falsch geschrieben oder nicht importiert wurde - und daher nicht im aktuellen Bereich definiert ist.

Wenn die Browser-Konsole beobachtete ich sehen:

[HMR] Cannot apply update. Need to do a full reload! 
app.js:90432 [HMR] ReferenceError: NewComponent is not defined 

Allerdings, wenn ich die Seite aktualisieren ich dann in beide sehen dem Browser und dem Server-Log:

Invariant Violation: removeComponentAsRefFrom(...): Only a ReactOwner can have refs. You might be removing a ref to a component that was not created inside a component's `render` method, or you have multiple copies of React loaded (details: https:// fb.me/react-refs-must-have-owner). 
    at invariant (E:\testing\node-seed\tmp\webpack:\~\fbjs\lib\invariant.js:38:1) 

den Komponentennamen Fixing, oder es zu importieren, behebt diesen Fehler in diesem Fall.