javascript - Redux-form:在模式弹出时如何从 API 调用加载值(编辑模式)到表单？

Question

我对 React 和 Redux-Form 还很陌生，目前我需要一些帮助。

基本上我有包含列表及其编辑按钮的列表页面。单击编辑后，我将显示一个带有字段的模式弹出窗口，并执行 API 调用来获取相应的列表数据。

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

非常感谢使用代码示例进行演示(就像我说的，我对 React & Redux & Redux-form 很陌生)。 :(

提前致谢!

Answer 1

流程如下:

componentDidMount() {
    this.props.loadClient(); // dispatch an action from your component
}

Action 调度程序

loadClient() {
 // API call here
}

将结果存储在redux reducer 中

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

然后将initialValues属性添加到@connect装饰器

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

示例: 您可以在 reduxForm 本身加载初始值。

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)

您的组件必须具有 Form 组件。其余部分将由 redux-form 负责。

Note:
Structure of your initialValues must same of form data. Field name and the object property name should be same.

更多详细信息可以引用redux-form官方页面Here