Question

升级v4时出现错误：

Uncaught (in promise) Invariant Violation: You must pass a component to the function returned by connect. Instead received {"propTypes":{},"displayName":"WithStyles(EditDialog)",...}

我尝试根据I'm getting error after upgrading to Material UI 4 - withStyles方法查看react-redux的版本：

$ npm view react-redux version
7.1.0

显然，我们的情况有所不同。

应该注意，我的项目是使用类组件编写的，所以这可能是原因吗？

有什么方法可以帮助我定位问题吗？

-----追加--------------

我正在使用umi框架，这是我的代码：

account / index.js

import React from 'react';
import { connect } from 'dva';
import { withStyles } from '@material-ui/core';
import styles from '@/utils/pageLayout';

...

import DetailDialog from './components/DetailDialog';
import EditDialog from './components/EditDialog';

class Index extends React.Component {
    ...
}

function mapStateToProps(state) {
  const { list } = state.account;

  return {
    list
  };
}

export default connect(mapStateToProps)(withStyles(styles)(Index));

account / components / DetailDialog.js

import React from 'react';
import { connect } from 'dva';
import { withStyles } from '@material-ui/core';
import styles from '@/utils/pageLayout';

...

class DetailDialog extends React.Component {
  ...
}

DetailDialog.propTypes = {
  open: PropTypes.bool,
  ...
};

function mapStateToProps(state) {
  const { list } = state.account;

  return {
    list
  };
}

export default connect(mapStateToProps)(withStyles(styles)(DetailDialog));

account / components / EditDialog.js

import React from 'react';
import { connect } from 'dva';
import { withStyles } from '@material-ui/core';
import styles from '@/utils/pageLayout';

...

class EditDialog extends React.Component {
  ...
}

EditDialog.propTypes = {
  open: PropTypes.bool.isRequired,
};

EditDialog.defaultProps = {
  open: false,
};

function mapStateToProps(state) {
  const { list} = state.account;

  return {
    list,
  };
}

export default connect(mapStateToProps)(withStyles(styles)(EditDialog));

@ / utils / pageLayout.js

const styles = theme => ({
  r: {
    height: '100%',
  },
  ...
});

export default styles;

Answer 1

我看到您正在从'dva'导入connect。除非您使用的是Beta版本，否则dva的最新版本为2.4.1，其中包括react-redux作为依赖项（而不是对等依赖项），并且它使用的是"react-redux": "5.0.7"。这样便会遇到与question you linked to完全相同的问题。

这意味着您可能正在使用两个版本的react-redux（可能还有两个版本的redux），一个版本直接包含在您自己的package.json中，另一个版本由dva提取。

您的主要选择是将dva升级到最新的beta版本（当前是2.6.0-beta.12），或者从react-redux而不是dva导入connect。

我对dva一无所知，所以我不知道beta的形状，但是鉴于它是第12个beta，我想它已经接近稳定版本了。

如果您始终从dva导入redux / react-redux片段，那么您可能要考虑从自己的package.json中删除react-redux和redux，以避免将它们复制到不同版本。

我将material-ui升级到v4，它无法正常工作并引发错误，是什么原因引起的？

-----追加--------------

1 个答案: