不変違反：Redux形式のaddComponentAsRefTo（...）

私は自分のnode_modulesフォルダを削除し、最初からすべてを再インストールしました。私は（ReactRouterを使用して）私の/profileルートを打ったときに今、私は次のエラーを取得する：不変違反：Redux形式のaddComponentAsRefTo（...）

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

エラーメッセージでリンクされたページは、時にはあなたが反応の複数のコピーを持つことができますが、私は正しくこの出力を解釈していた場合、それは」doesnのことを示唆しています

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: [email protected]^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: [email protected]^1.16.0, required by [email protected]

この不変違反の原因は誰にも分かりますか？

出典

2016-12-09 mikewilliamson

-1

文字列を使用している参照を確認します。

私も同様の問題があり、文字列リファレンスを使用しないことで解決できました。

グッド：

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

悪い：

<input ref="textInput" />

チェックアウトここドキュメント：

を「あなた場合：彼らは実際にそれをしないと言う https://facebook.github.io/react/docs/refs-and-the-dom.html

前にReactで作業していた場合、古いAPIに精通している可能性がありますe ref属性は "textInput"のような文字列であり、DOMノードはthis.refs.textInputとしてアクセスされます。文字列リファレンスにはいくつかの問題があり、レガシーと見なされ、将来のリリースのいずれかで削除される可能性があるので、これに対して反対することをお勧めします。現在ref.textInputを使用してrefにアクセスしている場合は、代わりにコールバックパターンを使用することをおすすめします。 "

出典

2017-06-19 16:03:14 rardoz

不変違反：Redux形式のaddComponentAsRefTo（...）

答えて

関連する問題