Нарушение инварианта: addComponentAsRefTo() с Redux-формой

Я удалил свою папку 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).

У меня есть метод рендеринга моего компонента:

<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
[email protected] /home/mike/projects/upundit/upundit-desktop
│ ├── [email protected]
├─┬ [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ └─┬ [email protected]
│ ├── [email protected]
│ └── [email protected]
├─┬ [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected]
│ └── [email protected]
├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ └── [email protected]
├─┬ [email protected]
├── [email protected]
├─┬ [email protected]
│ ├── [email protected]
├─┬ [email protected]
├─┬ [email protected]
├─┬ [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ ├─┬ [email protected]
├─┬ [email protected]
├─┬ [email protected]
├── [email protected]
├─┬ [email protected]
npm ERR! peer dep missing: eslint-plugin-import@^1.16.0, required by [email protected]
npm ERR! extraneous: [email protected] /home/mike/projects/upundit/upundit-desktop/node_modules/node-pre-gyp
npm ERR! peer dep missing: eslint-plugin-import@^1.16.0, required by [email protected]

Кто-нибудь может увидеть, что вызывает это инвариантное нарушение?


reactjs redux-form react-router
person mikewilliamson    schedule 09.12.2016    source источник

Ответы (1)


arrow_upward
-1
arrow_downward

Проверьте наличие ссылок, использующих строку.

У меня была аналогичная проблема, и я смог решить ее, не используя ссылки на строки.

Хороший:

 <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. Мы не советуем этого делать, потому что ссылки на строки имеют некоторые проблемы считаются устаревшими и, вероятно, будут удалены в одном из будущих выпусков. Если вы в настоящее время используете this.refs.textInput для доступа к ссылкам, вместо этого мы рекомендуем использовать шаблон обратного вызова».

person rardoz    schedule 19.06.2017