javascript - 警告 : Failed prop type: Invalid prop `initialValues` supplied to `Form(AddComment)`

Question

我的应用程序有动态路由(动态路由参数)，其中包含redux表单。为了区分表单数据，我需要将redux表单数据与react路由参数一起发布。

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

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
        }
    };

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