Question

我删除了我的node_modules文件夹并从头开始重新安装了所有内容（如同）。现在当我点击我的/profile路由（使用ReactRouter）时，我收到以下错误：

invariant.js?7ab6:38Uncaught Invariant Violation: addComponentAsRefTo(...): 
Only a ReactOwner can have refs. You might be adding a ref to a component
that was not created inside a component's `render` method, or you have multiple
copies of React loaded (details: https://facebook.github.io/react/warnings/refs-must-have-owner.html).

我有我的组件的render方法：

<ProfileFormConnected initialValues={currentUser && { university_name: currentUser.university_name }} updateCurrentUser={ ::this.props.updateCurrentUser } />

如果删除该行，问题就解决了。 ProfileFormConnected的实施几乎直接来自redux-form文档：

 import React, { Component } from 'react'
import TextField from 'material-ui/TextField'
import RaisedButton from 'material-ui/RaisedButton'
import { Field, reduxForm } from 'redux-form'

const validate = values => {
  const errors = {}
  const requiredFields = [ 'university_name' ]
  requiredFields.forEach(field => {
    if (!values[ field ]) {
      errors[ field ] = 'Required'
    }
  })
  return errors
}

const renderTextField = ({ input, label, meta: { touched, error }, ...custom }) => (
    <TextField hintText={label}
      floatingLabelText={label}
      errorText={touched && error}
      {...input}
      {...custom}
    />
)

class ProfileForm extends Component {

  render() {
    const {
      handleSubmit,
      pristine,
      reset,
      submitting,
      updateCurrentUser
    } = this.props

    return (
      <form onSubmit={ handleSubmit(updateCurrentUser) }>
        <Field name="university_name" component={renderTextField} label="University Name" />
        <div>
          <RaisedButton type="submit" disabled={pristine || submitting} label="Save" />
        </div>
      </form>
    )
  }

}

const ProfileFormConnected = reduxForm({
  form: 'profile',
  validate
})(ProfileForm);

export default ProfileFormConnected

错误消息中链接到的页面表明，有时您可以拥有React的多个副本，但如果我正确地解释此输出，那么这似乎不是这样的：

npm ls | grep react
electron-react-boilerplate@0.10.0 /home/mike/projects/upundit/upundit-desktop
│ ├── react-addons-css-transition-group@15.4.1
├─┬ babel-preset-react@6.16.0
│ ├── babel-plugin-transform-react-display-name@6.8.0
│ ├─┬ babel-plugin-transform-react-jsx@6.8.0
│ │ └─┬ babel-helper-builder-react-jsx@6.18.0
│ ├── babel-plugin-transform-react-jsx-self@6.11.0
│ └── babel-plugin-transform-react-jsx-source@6.9.0
├─┬ babel-preset-react-optimize@1.0.1
│ ├── babel-plugin-transform-react-constant-elements@6.9.1
│ ├── babel-plugin-transform-react-inline-elements@6.8.0
│ ├─┬ babel-plugin-transform-react-pure-class-to-function@1.0.1
│ │ └── babel-helper-is-react-class@1.0.0
│ └── babel-plugin-transform-react-remove-prop-types@0.2.11
├── eslint-plugin-react@6.8.0
│ ├── react-addons-create-fragment@15.4.1
│ ├── react-addons-transition-group@15.4.1
│ ├─┬ react-event-listener@0.4.0
│ │ └── react-addons-shallow-compare@15.4.1
├─┬ react@15.4.1
├── react-addons-test-utils@15.4.1
├─┬ react-apollo@0.5.16
│ ├── hoist-non-react-statics@1.2.0
├─┬ react-dom@15.4.1
├─┬ react-electron-webview@1.0.7
├─┬ react-hot-loader@3.0.0-beta.6
│ ├── react-deep-force-update@2.0.1
│ ├─┬ react-proxy@3.0.0-alpha.1
│ ├─┬ redbox-react@1.3.3
├─┬ react-redux@4.4.6
├─┬ react-router@3.0.0
├── react-router-redux@4.0.7
├─┬ react-tap-event-plugin@2.0.1
npm ERR! peer dep missing: eslint-plugin-import@^1.16.0, required by eslint-config-airbnb@12.0.0
npm ERR! extraneous: node-pre-gyp@0.6.32 /home/mike/projects/upundit/upundit-desktop/node_modules/node-pre-gyp
npm ERR! peer dep missing: eslint-plugin-import@^1.16.0, required by eslint-config-airbnb-base@8.0.0

任何人都可以看到造成这种不变违规的原因吗？

Answer 1

检查使用字符串的引用。

我有一个类似的问题，并且能够通过不使用字符串引用来解决它。

好：

 <input ref={(input) => { this.textInput = input }} />

为：

 <input ref="textInput" />

在这里查看文档： https://facebook.github.io/react/docs/refs-and-the-dom.html

他们实际上说不要这样做：

“如果你以前使用过React，你可能熟悉一个旧的API，其中ref属性是一个字符串，比如”textInput“，而DOM节点是作为this.refs.textInput访问的。我们建议反对它，因为string refs有一些问题，被认为是遗留的，很可能会在未来的一个版本中被删除。如果你现在使用this.refs.textInput来访问refs，我们建议使用回调模式。“

不变违规：addComponentAsRefTo（...）与Redux-form

1 个答案: