Question

我尝试从数组中选择表单值并在输入部分下方显示它们。我知道如何使用单个字段，但数组让我感到困惑。

这里我正在渲染字段数组：

export const renderAddressFields = ({ fields, meta: { touched, error } }) => (   
   <View>
   {touched && error && <Text style={styles.ErrorMessage} >{error}</Text>}     
    {fields.map((ad, index) =>
      <View key={index}>        
        <Text>Address #{index + 1}</Text>
         <View style={styles.AddressFields}>
            <Field
              name={`${ad}.StreetName`}
              type="default"
              component={renderField}
              label="Street Name"/>
            <Field
              name={`${ad}.Number`}
              type="numeric"
              component={renderField}
              label="Street Number"/>
        </View>              
      </View>    
    )}    
    </View>  
)

这是我（不成功）尝试从字段数组中选择单个值：

const { handleSubmit, mySubmit, fullAddress} = this.props

...

<Text>{fullAddress}</Text>

...

Form = reduxForm({
  form: 'registerForm',     // a unique identifier for this form
  validate,
})(withRouter(Form))

const selector = formValueSelector('registerForm') // <-- same as form name
Form = connect(
  state => {
    const { StreetName, Number } = selector(state, { Addresses: [{ StreetName: 'StreetName', Number: 'Number' }] })
    return {
      fullAddress: `${StreetName || ''} ${ Number || ''}`
    }
  }
)(Form)

export default Form

Answer 1

您的选择器看起来像一个问题来源。做这样的事情：

renderAddressFields = connect(state => {

    let nameValue = selector(state, "nameofyourfieldarray[0].StreetName");

    return {
        nameValue
    };
})(renderAddressFields)

然后使用它：

export const renderAddressFields = ({ fields, meta: { touched, error }, nameValue })

Redux-Form：从对象数组中选择表单值

1 个答案: