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' of undefined

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

"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 试图调用 Mention 的 toString() 方法：

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

谷歌搜索问题并没有给出太多信息，但我们发现问题位于 react-hot-loader 和 Mention 初始化之间。

删除 react-hot-loader 包装，表明 Mention 继续工作。

顺便说一句：你似乎有误导性的评论，你没有传递任何东西，因为在项目中你用 react-hot-laoder 的 AppContainer

包装它

这给出了检查 react-hot-loader 当前版本是否过时的想法（读作 "has bug in it and can be upgraded"）

检查项目的 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 不是从检查的类型中调用的，而是使用 react-stand-in 中的 createProxy。

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

antd Mention 组件异常错误

Unusual error with antd Mention component

reactjs

antd