Question

我正在使用Antd Mention组件。用法非常简单。

import React, { Component } from 'react';
// import PropTypes from 'prop-types';
// import { connect } from 'react-redux';
import { Mention } from 'antd';

class CommentInput extends Component {
    render() {
        return (
            <div className="comment-input">
                <Mention />
            </div>
        );
    }
}

export default CommentInput;

但我在控制台中遇到一个不寻常的错误：无法读取属性＆＃39; getBlockMap＆＃39;未定义的

似乎错误是由于项目中的包依赖性所致：

"dependencies": {
        "antd": "^3.4.3",
        "axios": "^0.17.1",
        "d3": "^4.13.0",
        "email-validator": "^2.0.3",
        "firebase": "^4.12.0",
        "history": "^4.7.2",
        "lodash": "^4.17.5",
        "moment": "^2.21.0",
        "query-string": "^6.1.0",
        "react": "^16.2.0",
        "react-dom": "^16.2.0",
        "react-faux-dom": "^4.1.0",
        "react-icons": "^2.2.7",
        "react-redux": "^5.0.7",
        "react-router-dom": "^4.2.2",
        "redux": "^3.7.2",
        "redux-logger": "^3.0.6",
        "redux-thunk": "^2.2.0"
    },

我已将git repo放在一起，显示我的项目依赖项存在问题。

有任何解决此问题的想法吗？

Answer 1

简短回答：

将react-hot-loader升级为3.1.3至4.2.0

安装ncu：npm install -g npm-check-updates
升级react-hot-loader：ncu -u react-hot-loader
安装包：npm install
重新运行npm run start

详细答案

如果您在代码的这一行放置一个中断，您将看到contentState未定义。

然后，使用Chrome的DevTools的Call Stack，您可以跟踪预期定义contentState的位置：

最终你自己导航到地方，react-hot-loader试图调用toString()的{{1}}方法：

通常，Mention只返回字符串，但在这种情况下，它会尝试实际构造toString()。

Google搜索问题并不多，但我们发现问题位于Mention和react-hot-loader初始化之间。

删除Mention换行，表明react-hot-loader仍在继续。

Mention

react-hot-laoder

AppContainer

这样可以检查react-hot-loader的当前版本是否已过时（读作“其中包含错误且可以升级”）

使用package.json检查项目npm-check-update，表明它可以从3.1.3升级到4.2.0。这是主要的版本升级，听起来很有希望

运行ncu -u react-hot-loader然后yarn / npm install，然后重新运行yarn start / npm run start修复问题

<强>更新

出于好奇，我们可以查看react-hot-loader releases page，我们看到该版本3.1.3直接跳到v4.0.0-beta.1。

检查两个版本的源代码，我们可以看到resolveType函数的内容已完全改变。更深入的调查证明，toString未从检查过的类型中调用，而是使用来自createProxy的{{1}}。

现在我们可以肯定的是，版本升级是正确的做法。

antd Mention组件的异常错误

1 个答案: