【问题标题】:redux form initialValues not updating stateredux 表单 initialValues 不更新状态
【发布时间】:2018-04-05 05:43:27
【问题描述】:

我尝试在我的 redux-form 中设置我的值,但输入没有显示该值。有人可以帮帮我吗?

这是我的代码。

import React from "react";
import { Field, reduxForm } from "redux-form";
import {connect} from 'react-redux';
import {renderTextField, renderField, validate, warn} from "../../../Components/Forms/renders"
class SyncValidationForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      errors: {}
    }
  }

  render() {
  const { handleSubmit, pristine, reset, submitting } = this.props;
  return (
    <form onSubmit={handleSubmit}>
      <div className="col-sm-12">
        <h4 className="info-text"> Let's start with the basic details</h4>
      </div>
      <Field name="what.title.value" type="text" component={renderField} label="Titel" />

    </form>
  );
}
}
SyncValidationForm = reduxForm({
  form: 'insertstart',
  enableReinitialize: true,
  validate, // <--- validation function given to redux-form
  warn
})(SyncValidationForm);

const mapStateToProps = state => {
  return {
    initialValues: state.items.item,

  }
}

export default connect(mapStateToProps)(SyncValidationForm)

我的控制台日志是通过 console.log(this.props); 看到的;

initialValues:{what.title.value: "test"}

【问题讨论】:

    标签: reactjs redux redux-form


    【解决方案1】:

    您需要将初始值作为对象传递,所以不是

    what.title.value: "test"

    你的state.items.item 应该是这样的:

    { what: { title: { value: "test" } } }

    有关工作示例,请参阅 here

    【讨论】:

      【解决方案2】:

      始终使用change 函数绑定redux-form 字段中的数据

      componentWillMount() {
          const { change } = this.props
          change('basicDetails', 'sdfuhdsuiafghfudsauifhdsuifhuiads') // this will bind name with basicDetails
      }
      
      <form onSubmit={handleSubmit}>
            <div className="col-sm-12">
              <h4 className="info-text"> Let's start with the basic details</h4>
            </div>
            <Field name="basicDetails" type="text" component={renderField} label="Titel" />
          </form>
      

      【讨论】:

        猜你喜欢
        • 2016-12-17
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2017-08-30
        • 1970-01-01
        • 2020-08-01
        • 2021-10-17
        • 1970-01-01
        相关资源
        最近更新 更多