Redux在渲染之前如何渲染一個數組的Field？

我試圖執行與ReduxForm一個很簡單的例子，我有渲染前兩個功能，但功能之一調用其他的組件道具，但隨後是不確定的。我試圖綁定這個，但它仍然不認識它。Redux在渲染之前如何渲染一個數組的Field？

這裏是我的代碼：

import React, { Component } from 'react' 
import { Field, FieldArray, reduxForm } from 'redux-form' 

class Page4 extends Component { 
    constructor(props) { 
    super(props) 
    this.simpleField.bind(this) 
    } 

    simpleField(field) { 
    const { meta } = field 
    return (
    <div className='form-group'> 
     <label>{field.label}</label> 
     <input 
     className='form-control' 
     {...field.input} 
     /> 
    </div> 
) 
} 
    // This function cannot reach the simpleField component 
    myFields(field) { 
    let optiosArray = [ 
     {'label':'Option 1', 'value':'1'}, 
     {'label':'Option 2', 'value':'2'} 
    ] 
    return(
     optionsArray.map((option, key) => { 
     <Field 
      label= {option.label} 
      value= {option.value} 
      name={option.value} 
      component={this.simpleField} 
     /> 
     }) 
    ) 
    } 

render() { 
    return (
    <div> 
     <FieldArray 
     name='test' 
     label='label' 
     component={this.myFields} 
     /> 
    </div> 
) 
} 
} 

const validate = (value) => { 
const errors = '' 
return errors 
} 

export default reduxForm({ 
validate, 
form: 'Page4' 
})(Page4)

來源

2017-07-02 Lucas Oliveira Silva

你壓痕關閉。你也說過你綁定了自己的功能，但是我看不到你做了這些。你不能通過函數內的'this'來訪問你的實例，而無需綁定它們。 – trixn

嗨。編輯和修正：如果我綁定這個，我仍然會得到相同的錯誤。未捕獲的TypeError：無法讀取未定義的屬性'simpleField' –

那麼究竟是什麼錯誤？你能否把它的確切文字添加到你的問題中？ – trixn

要訪問this.simpleFields，在構造函數結合的this.myFields是不夠好。

constructor(props) { 
    super(props) 
    this.myFields = this.myFields.bind(this) 
    }

this.myFields = this.myFields.bind（本）

我認爲你是正確使用FieldArray。我已經修改了代碼，以便它能夠告訴你如何使用FieldArray。工作的jsfiddle這裏 - https://jsfiddle.net/sherin81/4u3hk7kg/

class Page4 extends Component { 
    constructor(props) { 
    super(props) 
    this.myFields = this.myFields.bind(this) 
    } 

    simpleField = (field) => { 
    const { input: { value } } = field 
     return (
     <div className='form-group'> 
      <input type="text" name={field.input.name} onChange={field.input.onChange} value={value} /> 
     </div> 
    ) 
} 

    myFields({ fields }) { 
     return (<div>{fields.map((option, key) => { 
     return (<div key={key}> 
      <Field 
      name={option} 
      component={this.simpleField} 
      /> 
     </div>) 
     })}</div>) 
    } 

render() { 
    return (
    <div> 
     <FieldArray 
     name='listOfTextFields' 
     component={this.myFields} 
     /> 
    </div> 
) 
} 
} 

const validate = (value) => { 
const errors = '' 
return errors 
} 

const MyTextFields = reduxForm({ 
validate, 
form: 'Page4' 
})(Page4)

，並呼籲該組件時，你應該做到以下幾點。

<MyTextFields initialValues={{ listOfTextFields: [ 'Text 1','Text 2' ] }}/>

來源

2017-07-14 06:19:46

是的。我同意。我的代碼不工作的原因是由於它沒有遵循正確的邏輯方法。謝謝。 –

你沒綁定錯誤的函數。您正試圖在您的myFields()功能中訪問this。因此你必須綁定這個而不是simpleField()。

你有你的方法醚綁定在構造函數中：

class Page4 extends Component { 
    constructor(props) { 
     super(props); 
     this.myFields.bind(this); 
    } 

    myFields(...) { 
     .... 
    } 
}

，或者如果你用巴貝爾和ES6，你可以用一個箭頭的功能。這樣它就會被自動綁定：

class Page4 extends Component { 
    myFields = (field) => { 
     .... 
    }; 
}

不要在渲染循環中綁定函數，因爲這意味着您將在每個渲染器上創建一個新的回調函數。

來源

2017-07-02 16:25:23 trixn

我認爲我們很接近。但仍然沒有定義。 –

@LucasOliveiraSilva但它不是未定義的'this'。發佈錯誤信息的全文... – trixn

另外，你的代碼中有一個拼寫錯誤'let optiosArray = [...]''。請解決這個問題。 – trixn

Redux在渲染之前如何渲染一個數組的Field？

回答

相關問題