Javascript Redux表单：在模式弹出窗口中，如何从API调用加载值（编辑模式）到表单？

我对React和Redux是个新手，目前我需要一些帮助

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

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

非常感谢使用代码示例进行演示（就像我说的，我对React&Redux&Redux表单非常陌生）(

提前感谢！

以下是流程：

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

行动调度员

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)

let AddUser=props=>{
const{handleSubmit，initialValues}=props；
返回(
名称
电子邮件
菲诺
提交
);
}
导出默认AddUser=reduxForm（{form:'AddUser'，InitialValue:{
名称：“abc”，
电子邮件：“abc@gmail.com",
电话号码：“1234567890”
}}（AddUser）

您的组件必须具有表单组件。其余部分将由redux表单处理

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

有关更多详细信息，请参阅redux表单官方页面。以下是流程：

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

行动调度员

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)

let AddUser=props=>{
const{handleSubmit，initialValues}=props；
返回(
名称
电子邮件
菲诺
提交
);
}
导出默认AddUser=reduxForm（{form:'AddUser'，InitialValue:{
名称：“abc”，
电子邮件：“abc@gmail.com",
电话号码：“1234567890”
}}（AddUser）

您的组件必须具有表单组件。其余部分将由redux表单处理

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

---

有关更多详细信息，请参阅redux表单官方页面

谢谢@Sachidhanandhan

以下是我所做的-

使用

启用重新初始化：true定义了
reduxForm

在

connect（）

的

mapstatetops

中，我初始化了通过API接收并以

初始值存储的数据

将

reduxForm

连接到

connect（）

=>这是我之前错过的订单

它现在正在发挥作用

---

干杯！

谢谢@Sachidhanandhan

以下是我所做的-

使用

启用重新初始化：true定义了
reduxForm

在

connect（）

的

mapstatetops

中，我初始化了通过API接收并以

初始值存储的数据

将

reduxForm

连接到

connect（）

=>这是我之前错过的订单

它现在正在发挥作用

---

干杯

我是这样做的：

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

然后将

enableReinitialize

设置为

true

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

然后将应用程序连接到redux

商店

export default connect(mapStateToProps)(FormName);

---

如果您使用的是redux，您只需在

初始值中映射
状态

我是这样做的：

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

然后将
enableReinitialize
设置为
true

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

然后将应用程序连接到redux
商店

export default connect(mapStateToProps)(FormName);

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

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

将此设置为true
的可能重复