Question

我收到此proptype验证错误＆＃34;无效的道具＆＃34;如果我将它设置为接收数组然后它将显示预期的数组但接收对象，在其他情况下相同的错误预期函数但接收对象。在（signupData：PropTypes.object || PropTypes.array）这个警告如果我只为Object设置PropTypes然后错误是＆＃34;类型params＆＃34;的道具object无效;和如果为Array设置PropTypes，则错误为＆＃34;无效道具类型为params＆＃34;的object。任何人都有解决方案吗？

     import React,{PropTypes} from 'react';
     import { connect } from "react-redux";
     import * as AuthAction from "../../actions/authActions";
     import * as step2DataActions from "../../actions/step2DataActions";
     import update from 'react-addons-update';

 class SIGNUP extends React.Component{
 constructor(props){
      super(props);

 this.state = {
      teacherId:props.signupData.teacherId,
      data: props.signupData.step4.data,

      endTime: props.signupData.step4.endTime,
      head: props.signupData.step4.head,
      errorInput:'',
      errorField: '',
      valid: true,
      };
      }


      submitStepSignupForm(){
      let step3 = {single_classes:false,multiple_classes:true};
      let step4 =      {head:this.state.head,startTime:this.state.startTime,endTime:this.state.endTime,data:this.state.data};
      let submitData = {};
      submitData['teacher_id'] = this.state.teacherId;
      submitData['firstname'] = this.props.signupData.firstname;
      submitData['lastname'] = this.props.signupData.lastname;
      submitData['state'] = this.props.signupData.State;
      submitData['zipcode'] = this.props.signupData.zipcode;
      submitData['prefix'] = this.props.signupData.prefix;
      submitData['step2'] = this.props.step2Data;
      submitData['step3'] = step3;
      submitData['step4'] = step4;
      this.props.signupStep4(submitData);
      }
      closeModal(){
      this.props.scheduleData.dataExist = false;
      }

      render(){
      let tableStyle = {
           align:"center"
      };
      let list = this.state.data.map((p,index) =>{
           return (
                <tr className="grey2" key={index}>
                     {Object.keys(p).filter(k => k !== 'id').map(k => {
                           return (<td className="grey1" key={p.id+''+k}><div suppressContentEditableWarning="true" contentEditable="true"
                          value={k} onInput={this.editColumn.bind(this,{p},{k})}>{p[k]}</div></td>);
                     })}
                </tr>
           );
      });

      let startList = null;
      startList = this.state.startTime.map((obj,index)=>{
           let keyName = Object.keys(obj)[0];
           return(
                <td className="" key={index}><TimePicker start="08:00" end="18:00" step={1} name="C1StartTime" value={obj.StartTime} onChange={this.changeStartTime.bind(this,index,keyName)} /></td>
           );
      });

      let endList = null;
      endList = this.state.endTime.map((obj,index)=>{
           let keyName = Object.keys(obj)[0];
           return(
                <td className="" key={index}><TimePicker start="08:00" end="18:00" step={1} value={obj.EndTime} onChange={this.changeEndTime.bind(this,index,keyName)} /></td>
           );
      });

      let head = null;
      head = this.state.head.map((obj,index)=>{
           return (
                <td className="grey1" key={index}>{obj['class']}</td>
           );
      });


      return (
           <fieldset className="step-4">
                <div className="heading">
                     <h3>Tell us about your schedule</h3>
                     {/*<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit </p>*/}
                </div>
                <div className="schedule table-responsive">
                     <table cellSpacing="3" id="mytable" style={tableStyle}>
                          <tbody>
                               <tr className="grey2" >
                                    {head}
                               </tr>
                               <tr className="grey2" >
                                    <td className="">Start Time</td>
                                    {startList}
                               </tr>
                               <tr className="grey2" >
                                    <td className="">End Time</td>
                                         {endList}
                               </tr>

                               {list}</tbody>
                     </table>
                     <p><a id="add_row" className="btn btn-default" onClick={this.appendColumn}>Add +</a>
                     <a id="add_row" className="btn btn-default" onClick={this.removeColumn}>Remove -</a>
                     <span className="inputError" >{this.state.errorInput}</span>
                     <span className="inputError" >{this.state.errorField}</span>
                </p>
                </div>
                <input type="button" name="previous" className="previous pre-btn action-button" value="Previous" />
                {(this.state.valid)?(<input type="submit" name="submit" className="submit1 action-button1" value="Submit" onClick={this.submitStepSignupForm.bind(this)}/>):(<input type="submit"  name="submit" className="disable-step4" value="Submit"  />)}
           </fieldset>
      );
      }
      }
      STEP4SIGNUP.propTypes = {
       signupData : PropTypes.object || PropTypes.array,
       getSchedule : PropTypes.object || PropTypes.array,
       step2Data : PropTypes.object || PropTypes.array,
       scheduleData : PropTypes.object || PropTypes.array,
       signupStep4 : PropTypes.func
      };
      const mapStateToProps = (state) => {
       return {
        user: state,
        step2Data: state.step2Data.step2Data,
        scheduleData: state.step2Data.scheduleData,
        step4Data: state.step4Reducer.step4
      };
     };
     const mapDispatchToProps = (dispatch) => {
      return {
           signupStep4: submitData =>       dispatch(AuthAction.signupStep4(submitData)),
           getSchedule: (teacher_id) => dispatch(step2DataActions.getSchedule(teacher_id)),
 };
 };

    export default connect(mapStateToProps,mapDispatchToProps)(STEP4SIGNUP);

Answer 1

当你写signupData : PropTypes.object || PropTypes.array时，你基本上是在说

if(PropTypes.object){
   return PropTypes.object;
} else {
   return PropTypes.array;
}

换句话说，由于PropTypes.object将始终评估为true，因此您始终将您的道具宣布为PropTypes.object。

如果您要针对多种类型验证道具，请使用oneOfType

  // An object that could be one of many types
  optionalUnion: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number,
    PropTypes.instanceOf(Message)
  ])

失败的道具类型：提供给`SignUp`的类型`object`的prop`params`，期望的`array`

1 个答案: