警告：失敗した小道具の種類：無効な小道具 '初期値'が 'フォーム（AddComment）'に提供されました

Question

私のアプリケーションには還元型が含まれている動的経路（動的経路パラメータ）があります。レスポンスパラメタとともに還元型のデータを投稿する必要があります。

私は反応経路パラームを親コンポーネントから還元型フォームを持つ子コンポーネントに渡しました。すなわち、小道具の初期値はparam値です。入力パラメータを隠し型で入力フィールドに初期化したい。

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を渡すことで、この問題を解決しました。