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？

回答

相关问题