React 和 Material-UI：未捕获的不变违规：removeComponentAsRefFrom(...)答案

【问题标题】：React and Material-UI: Uncaught Invariant Violation: removeComponentAsRefFrom(...)React 和 Material-UI：未捕获的不变违规：removeComponentAsRefFrom(...)
【发布时间】：2023-04-08 13:07:01
【问题描述】：

我使用 Material-UI 开发 React 组件：

这很好用

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;

但是当我将<List> 移动到另一个组件时

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;

在这种情况下，我会收到：

未捕获的不变违规：removeComponentAsRefFrom(...): 只有一个 ReactOwner 可以有 refs。您可能正在删除对组件的引用不是在组件的 `render` 方法中创建的，或者您加载了多个 React 副本（详情：链接）。

main.js

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

有什么建议可以避免这种情况吗？谢谢！

【问题讨论】：

您能在MainView.js 中显示所有import 语句吗？

标签： javascript reactjs material-ui

【解决方案1】：

如果我将组件添加到拼写错误或未导入的渲染方法中 - 因此未在当前范围内定义，我会看到此错误。

如果看浏览器控制台，我会看到：

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

但是，如果我刷新页面，我会在浏览器和服务器日志中看到：

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)

在这种情况下，修复或导入组件名称可以解决此错误。

【讨论】：