antd Mention组件的异常错误

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;

但是我在控制台中遇到一个不寻常的错误:无法读取未定义的属性'getBlockMap'

看来错误是由于我的项目中的包依赖性:

"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

1. 安装ncu: npm install -g npm-check-updates

2. 升级react-hot-loader:ncu -u react-hot-loader

3. 安装包: npm install

4. 重新运行 npm run start

详细的答案

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

然后,使用Call StackChrome的DevTools,您可以跟踪contentState预期定义的位置:

并最终你自己导航到地方,react-hot-loader试图调用toString()方法Mention:

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

谷歌搜索问题并没有给出多少,但我们发现问题位于初始化react-hot-loader和Mention初始化之间.

删除react-hot-loader包装,显示Mention继续工作.

顺便说一句:你似乎有误导性的评论,你是不是递东西,因为在这个项目你包起来react-hot-laoder的AppContainer

这给出了检查当前版本react-hot-loader是否过时的想法(读作"有bug并且可以升级")

检查项目的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 发布页面,我们看到该版本3.1.3直接跳转到v4.0.0-beta.1.

检查两个版本的源代码,我们可以看到resolveType功能的内容,已经完全改变了.更深入的调查证明,这toString不是从被检查的类型调用,而是createProxy来自react-stand-in使用.

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