将 redux-form 库 initialValue 注入 <Field>

Posted 2023-02-19

【中文标题】将 redux-form 库 initialValue 注入 <Field>

【英文标题】：Getting redux-form library initialValue injected into <Field>

【发布时间】：2021-10-13 03:22:07

【问题描述】：

我正在构建一个 EDIT 表单，最终用户可以在其中查看以前提交的数据，对其进行更改并将其保存回数据库。

问题是在输入字段中显示以前的数据。表单是用 redux-form (here the library) 构建的，它使用了<Field> 组件。

目前流程如下：

获取数据和调度 这段代码将已经保存在数据库中的数据发送到reducer

  React.useEffect(() => 

    axios.get(`$API.BASE_URL$API.VIEW_STORES/$params.storesid`)
    .then((data) => 
      dispatch(editStoreFields(data))
    )
  , [dispatch, params.storesid])

减速器

export default function (state = [], action) 
  switch (action.type) 
    case EDIT_STORE_FIELDS:
      return 
        ...state,
        myStore: action.data,
      
    default:
      return state;
  

现在我将发送给reducer的代码通过mapStateToProps传递

class UsersForm extends Component 

  render() 
    const 
      handleSubmit, pristine, reset, submitting, t, myStore
     = this.props;

    if(myStore === undefined) 
      return false
    

    return (
      <form className="form" onSubmit=handleSubmit>
        <div className="form__form-group">
          <span className="form__form-group-label">MY BUSINESS</span>
          <div className="form__form-group-field">
            <Field
              name="businessname"
              component=renderField
              type="text"
              >>>>> ISSUE IS HERE <===== I need to inject the value of myStore.businessname in here, but I can't figure that out.
            />
          </div>
        </div>


        <ButtonToolbar className="form__button-toolbar">
          <Button color="primary" type="submit">SAVE</Button>
        </ButtonToolbar>
      </form>
    );
  


const mapStateToProps = (state) => 
  return 
    myStore: state.storeReducer.myStore
  


export default reduxForm(
  form: 'vertical_form_validation', // a unique identifier for this form
  validate,
  enableReinitialize : true
, mapStateToProps)(transHook(UsersForm));

Redux 存储价值：

storeReducer:
   myStore:
     _id(pin):"610d12a52afdd35d4f2456a1"
    businessname(pin):"qeqe"

通过 mapState 返回的 MyStore 值...

 _id:"610d12a52afdd35d4f2456a1"
 businessname:"qeqe"

所以，正如您所看到的，将数据从 API GET 调用传递到道具的路由绝对没问题，但我找不到将道具传递给 <Field> 并将其显示为文本的方法由用户更改并重新提交。

非常感谢任何帮助。请注意，您需要了解 redux-form 库的工作原理才能提出解决方案。

谢谢乔

【参考方案1】：

更新： 我找到了解决办法。

第一个：

<Field
   name="businessname"
   component=renderField
   type="text"
/>

这里不需要任何东西。带有initialValues 的函数mapStateToProps 将自动使用字段的name 并分配正确的值。

这里是主要部分：

const mapStateToProps = (state) => (
  initialValues: state.storeReducer.myStore
)

myStore 已经是一个包含与字段名称匹配的所有键的对象。使用这种语法，我会自动在 html 中的所有字段中填充正确的数据，这些数据可以更改和重新提交。

在顶部，为了让所有内容保持内联，为 IF 语句调用 initialValues 属性：

const 
      handleSubmit, pristine, reset, submitting, t, initialValues
     = this.props;

    if(initialValues === undefined) 
      return false
    

这不是解决问题所必需的，但我想记录一下，以防你们遵循此代码。