Reactjs &引用；只有ReactOwner才能有refs“；尽管运行了一个react副本并且没有损坏的引用

我老了

invariant.js:44未捕获错误：addComponentAsRefTo（…）：只有ReactOwner可以有引用。您可能正在向未在组件的
render
方法中创建的组件添加引用，或者已加载多个副本

参考绝对不是问题所在（它们在渲染方法中，移除后问题仍然存在）。我也没有react的多个副本-在node_模块中没有一个额外的副本，npm ls react返回一个实例，我没有安装react插件。我正在使用webpack

在webpack配置中添加别名没有帮助，重新安装依赖项没有帮助，从npm/webpack外部删除react和链接它没有帮助

这是我的网页配置：

module.exports = {
    watch: true,
    entry: "./components/FreshInvestigationForm/FreshInvestigationForm.tsx",
    output: {
        filename: "bundle.js",
        path: __dirname + "/dist"
    },
    devtool: "source-map",    
    resolve: {
        extensions: [".ts", ".tsx", ".js", ".json", "css"]
    },    
    module: {
        rules: [
            {
                test: /\.ts|\.tsx$/,
                use: ["babel-loader","awesome-typescript-loader"]
            },
            {
                test: /\.css?$/,
                use: ["css-loader"]
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/,
                use: 'file-loader?name=public/fonts/[name].[ext]'
            },
            {
                test: /\.(jpe?g|png|gif|svg)$/i,
                use: ['file-loader?hash=sha512&digest=hex&name=[hash].[ext]',
                    'image-webpack-loader?bypassOnDebug&optimizationLevel=7&interlaced=false']
            },
            {
                enforce: "pre",
                test: /\.js$|\.jsx$/,
                use: ["babel-loader", "source-map-loader"]
            }
        ]
    }
};

还有我的依赖关系

 "dependencies": {
    "@types/react": "15.0.30",
    "@types/react-dom": "^15.5.1",
    "awesome-typescript-loader": "^3.2.1",
    "prop-types": "^15.5.10",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "source-map": "^0.5.6",
    "style-loader": "^0.18.2",
    "typescript": "^2.4.2"
  },
  "devDependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^6.4.1",
    "babel-plugin-transform-es2015-modules-commonjs": "^6.24.1",
    "babel-plugin-transform-object-assign": "^6.22.0",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-polyfill": "^6.23.0",
    "babel-preset-env": "^1.6.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-runtime": "^6.23.0",
    "css-loader": "^0.28.4",
    "file-loader": "^0.11.2",
    "image-webpack-loader": "^3.3.1",
    "source-map-loader": "^0.2.1",
    "typescript-simple-loader": "^0.3.8",
    "webpack": "^3.3.0"
  }

而且，这是一个多么可怕的错误，几乎每个解决它的人都以不同的方式来做

编辑：

我已经设法缩小了问题的范围，有几个组件触发了错误，但我无法确定问题。它们都在同一个地方被称为：

listToRender.forEach((item: field, index: number) => {
            const subGroup: Object = item.hasOwnProperty("subGroup") ? item.subGroup : null;
            const isDropdown = this.state.dropdowns[item.value] !== undefined;
            const isSearchDropdown = this.state.searchDropdowns.indexOf(item.value) > -1;
            const isMultiYear = this.state.multiYear.indexOf(item.value) > -1;
            const isMultipleSelection = this.state.multipleSelectionDropdowns.indexOf(item.value) > -1;
             if (isSearchDropdown) {
                listElems.push(<SearchSelectFormElem /> }
else {and so on for other possibilities}
return(<ul>{listToRender}</ul>)

listToRender.forEach（（项目：字段，索引：编号）=>{
const subGroup:Object=item.hasOwnProperty（“subGroup”）？item.subGroup:null；
const isDropdown=this.state.dropdowns[item.value]！==未定义；
const isSearchDropdown=this.state.searchDropdowns.indexOf（item.value）>-1；
const isMultiYear=this.state.multiYear.indexOf（item.value）>-1；
const isMultipleSelection=this.state.multipleSelectionDropdowns.indexOf（item.value）>-1；
如果（isSearchDropdown）{
listlems.push（}
else{其他可能性依此类推}
返回（
{listToRender}
）

这是最短的一个有问题的组件。不要被它有一个ref误导，删除它不会改变任何东西

import * as React from "react";
var $: any = $;

export interface IProps {
    givenId: string;
    specialType: string;
    inputValue?: string;
    updateModel: Function;
}

export default class SearchSelectFormElem extends React.Component<IProps, { selectNode: any }> {
    private searchSelect: HTMLSelectElement;
    showDropdown() {
        $(this.searchSelect).select2("open");
    }
    componentDidMount() {
        $(this.searchSelect).select2({ selec2 options });
    }
    render() {
        let fieldLabel: string = this.props.givenId;
        fieldLabel = fieldLabel.replace(/([A-Z])/g, ' $1').trim();

        return (
            <li className="form-list-elem has-special-input dropdown">
                <label htmlFor={this.props.givenId} className="form-label">
                    {fieldLabel}
                </label>
                <div className="special-wrapper">
                    <select ref={(node) => {this.searchSelect = node}} className="form-input main-form-input select2picker search-dropdown" id={this.props.givenId}>
                        <option>{this.props.inputValue}</option>
                    </select>
                    <span className="special-control dropdown" onClick={this.showDropdown.bind(this)}></span>
                </div>
            </li>
        );
    }
}

import*as React from“React”；
var$：any=$；
导出接口IProps{
givenId：字符串；
特殊类型：字符串；
inputValue？：字符串；
updateModel：函数；
}
导出默认类SearchSelectFormElem扩展React.Component{
私有searchSelect:HTMLSelectElement；
摊牌{
$（this.searchSelect）。选择2（“打开”）；
}
componentDidMount（）{
$（this.searchSelect）.select2（{selec2 options}）；
}
render（）{
让fieldLabel:string=this.props.givenId；
fieldLabel=fieldLabel.replace（/（[A-Z]）/g，'$1'）.trim（）；
返回(

{fieldLabel}
{this.searchSelect=node}}className=“表单输入主表单输入select2picker搜索下拉列表”id={this.props.givenId}>
{this.props.inputValue}

);
}
}

正如我之前所写的，错误非常可怕，错误消息毫无帮助

实际原因是jquery（项目正在迁移到react，但依赖于一些jquery插件）。尽管工作正常，react只允许通过导入调用它。一旦我开始这样调用它

import * as $ from 'jquery'

---

应用程序重新开始工作。

您是否尝试查看了npm ls。可能是不同版本的全局和本地副本？是的，我找到了。但我什么也没找到。