react-native - redux-form initialValues 被创建为 Map

Question

我有一个 redux 表单，我正在尝试使用 initialValues 初始化表单。 .给定以下代码，表单未填充名称或年龄:

const EmployeesForm = reduxForm({
  form: 'addEmployee',
  enableReinitialize: true
})(EmployeesFormComponent)

export default connect((state, ownProps) => {
  const initialValues = { name: 'Jason', age: 24 }
  return {
    initialValues: initialValues
  }
})(EmployeesForm)

但是在 Web 开发控制台中检查 next state 时在 redux 上，我可以看到 form.values和 form.initial都是保存这些初始值的 Map 对象。



我应该如何转换对象以使其“适合”表单。
顺便说一句，我正在使用: import { Field, reduxForm } from 'redux-form/immutable'它是 redux-form 6.8.0。

Answer 1

您的 react-native Field 定义可能有问题。

<Field name="name" component={TextInput} />
<Field name="age" component={TextInput} />

确保这是您表单的正确定义。如果可以，也请添加组件标记，以便调试。

在带有 redux-form 的 react-native 中还有一个更棘手的部分是 onChangeText 回调而不是 onChange，因此为了解决这个问题，您必须在 react-native TextInput 组件周围创建一个包装器

const TextInputNative = ({ input: { onChange, ...inputProps }}) => {
    return <TextInput onChangeText={onChange} 
            {...inputProps} />
}

const EmployeesFormComponent = () => (
       <Field name="name" component={TextInputNative} />
       <Field name="age" component={TextInputNative} />
);

这也可能会阻止您的表单使用初始值进行更新。