警告：道具类型失败：提供给 Form(AddComment) 的道具 initialValues 无效

Question

我的应用程序有动态路由（dynamic route param），其中包含redux form.In 为了区分表单数据，我需要post redux 表单数据和react 路由参数

我已经将 react 路由参数作为 props 从父组件传递给具有 redux 形式的子组件，即 props 中的初始值具有参数 value.I 想要将路由参数初始化为输入字段带有隐藏类型。

import React from 'react';
import { Field, reduxForm,propTypes } from 'redux-form';
import submit from '../actions/commentActions'
import connect from 'react-redux';
const validate = values => {
  const errors = {}
  if (!values.email) {
    errors.email = 'Required'
  } else if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values.email)) {
    errors.email = 'Invalid email address'
  }

  if (!values.message) {
    errors.message = 'Required !!'
  }else if (values.message.length > 15) {
    errors.message = 'Must be 15 characters or less'
  }
  return errors
}

const renderField = ({
  input,
  label,
  type,
  meta: { touched, error, warning }
}) => (
  <div>
    <div>
      <input {...input} placeholder={label} type={type} className="form-control" />
      {touched &&
        ((error && <span className="text-danger">{error}</span>) )}
    </div>
  </div>
)

const renderTextAreaField = ({
  input,
  label,
  type,
  meta: { touched, error, warning }
}) => (
  <div>
    <div>
      <textarea {...input} rows="3" placeholder={label}
      className="form-control shareThought mt-1"></textarea>
      {touched &&
        ((error && <span className="text-danger">{error}</span>) )}
    </div>
  </div>
)

const AddComment = props => {
  const { error,handleSubmit, pristine, reset, submitting,initialValues } = props;
  // console.log(initialValues); prints route param i.e honda
  // console.log(props);

  return (
      <div className="leaveComment pb-2">
        <form onSubmit={handleSubmit(submit)}>
            <Field
              name="email"
              component={renderField}
              type="email"
              label="Email Id"
              placeholder="Enter Email"
            />

            <Field name="message"
             component={renderTextAreaField}
             label="Share Your thought"
             type="text"
             />

            <Field name="modelname"
             type="text"
             component="input"
             value={initialValues}
             hidden
             />

             <span className="text-danger">{error && <span>{error}</span>}</span>

            <div className="row mx-0" >
              <button type="submit" className="btn btn-sm btn-info btn-block mt-2" disabled={pristine || submitting}>Leave a comment</button>
            </div>
        </form>
      </div>
  );
};

export default reduxForm({
  form: 'addcommentmsg', 
  validate
})(AddComment);

Answer 1

我通过传递 initialValues 和键值

解决了这个问题

let initialValues = {
        initialValues: {
          modelname: this.props.pageId
        }
    };

因此您不必在输入字段或道具中定义 initialValues。

Answer 2

我也只能这样让它工作：

const mapStateToProps = state => {
    return {
        initialValues: {
            status: state.profile.userStatus
        }
    }
}

并且输入有这样的值：

value={props.initialValues}

警告：道具类型失败：提供给 Form(AddComment) 的道具 initialValues 无效

Warning: Failed prop type: Invalid prop `initialValues` supplied to `Form(AddComment)`

javascript

reactjs

redux

redux-form

react-router-dom