代码之家 › 专栏 › 技术社区 › Joe

正在将redux表单库initialValue注入<Field>

redux-form redux reactjs

Joe · 技术社区 · 3 年前

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

问题是在输入字段中显示以前的数据。该表单是用redux表单构建的( 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调用传递到props的路由是非常好的,但我找不到将props传递到 <字段> 并将其显示为用户可以更改并重新提交的文本。

非常感谢您的帮助。请注意,您需要了解redux表单库是如何工作的,以便提出解决方案。

谢谢Joe

0 回复 | 直到 3 年前

Dharman GPuri 3 年前

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

第一个:

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

这里什么都不需要。函数mapStateToProps与 initialValues 将自动使用 name 的字段,并分配正确的值。

这里是主要部分:

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

myStore 已经是一个具有与字段名称匹配的所有键的对象。使用这种语法,我可以自动将HTML中的所有字段填充为正确的数据,这些数据可以更改并重新提交。

在顶部,为了使所有内容保持内联,请调用 initialValue IF语句的道具:

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

    if(initialValues === undefined) {
      return false
    }

这不是解决问题的必要条件,但我想做一个说明,以防你们正在遵循这段代码。