Question

我对React＆amp; amp; Redux-Form，目前我需要一些帮助。

基本上我有列表及其编辑按钮的列表页面。单击编辑时，我将显示一个弹出模式的字段，并进行API调用以获取相应的列表数据。

您能否告诉我如何使用从API调用收到的数据预先填充模式中的字段？

使用代码示例的演示将非常受欢迎（就像我说我对React＆amp; Redux＆amp; Redux-form一样很新）。：（

提前致谢！

Answer 1

以下是流程：

loadClient() {
 // API call here
}

行动调度员

case LOAD_PROFILE_SUCCESS:
  return {
    ...state,
    data: action.result // save your data here
  };

将结果存储在redux reducer中

@connect(state => ({
    initialValues: state.profile.data // load the saved data here
  }),
  { loadClient }
)

然后将initialValues道具添加到@connect装饰器

let AddUser = props => {
    const { handleSubmit, initialValues } = props;
    return (
        <form onSubmit={handleSubmit}>
            <div>
                <label htmlFor="name">Name</label>
                <Field name="name" component="input" type="text" />
            </div>
            <div>
                <label htmlFor="email">Email</label>
                <Field name="email" component="input" type="email" />
            </div>
            <div>
                <label htmlFor="phoneno">PhoneNo</label>
                <Field name="phoneNo" component="input" type="text" />
            </div>
            <button type="submit">Submit</button>
        </form>
    );
}

export default AddUser = reduxForm({ form: 'addUser', initialValues: {
  name: "abc",
  email: "abc@gmail.com",
  phoneNo: "1234567890"
} })(AddUser)

实施例：您可以在reduxForm本身加载intial值。

DEBUG=True

您的组件必须具有Form组件。休息将由redux-form处理。

注意：
initialValues的结构必须与表单数据相同。字段名称和对象属性名称应相同。

有关详细信息，请参阅redux-form官方页面Here

Answer 2

谢谢@Sachidhanandhan！

这就是我做的 -

使用reduxForm

enableReinitialize: true

在mapStateToProps的{{1}}中，我初始化了我通过API收到的数据并将其存储在状态connect()
将initialValues与reduxForm =＆gt;连接起来这是我之前错过的订单

现在它就像一个魅力。

干杯！

Answer 3

如果您使用redux，则只需将state映射到initialValues；

这是我的方法：

const mapStateToProps = (state) => {
    const { state } = state;
    return {
        initialValues: state,
    }
}

然后将enableReinitialize设置为true

FormName = reduxForm({
    form: 'formname',
    enableReinitialize : true
})(FormName);

然后connect您的应用到您的redux store

export default connect(mapStateToProps)(FormName);

Answer 4

启用重新初始化：布尔值[可选] 设置为true时，每次initialValues属性更改时，表单将重新初始化。默认为false。如果还设置了keepDirtyOnReinitialize选项，则表单将在重新初始化时保留脏字段的值。

将此设置为 true

Redux-form：如何在弹出模式时从API调用加载值（编辑模式）到表单？

4 个答案: