TypeError: this.props.nextStep 不是函数 React 错误

Question

您好，我正在尝试使用 TypeScript 和 JS 在 React 中设计一个分步向导表单，但是当我单击下一个（继续）按钮时，我收到此错误：

this.props.nextStep is not a function

我的代码有 2 种不同的计步系统，一种用于 UI 步进器（进度条）的步骤，另一种用于滑动/显示表单，当我单击按钮时，它们都需要发生。这是我在 Sandbox 中的组件：2 个表单页面的 tsx 和 js 示例、包含我的按钮的主表单生成器、步进器和表单 (CreateJob.js) 以及我的 UI 步进器单独组件 (Stepper.js) :https://codesandbox.io/s/tsx-rj694

似乎是什么问题？

编辑：返回错误的函数是（CreateJob.js）

continue

使用道具的表单在沙盒中

class CreateJob extends Component {
  constructor () {
    super()
    this.state = {
      currentStep: 1
    }
    this.Formstate = {
      Formstep: 1
    }
  }
  Formstate = {
    //Formstep:1,
    Title:'',
    ActivationDate:'',
    ExpirationDate:'',
    DirectManager:'',
    HRBP:'',
    Details:'',
    MinE:'',
    WType:'',
    Address:'',
    Department:'',
    Salary:''
  }

  nextStep =() => {
    const {Formstep} = this.Formstate
    this.setState({
      Formstep: Formstep + 1
    })
  }
  prevStep =() => {
   const {Formstep} = this.Formstate
   this.setState({
     Formstep: Formstep - 1
   })
 }
  handleClick = clickType => {
    const {currentStep} = this.state
    let newStep = currentStep
    clickType === 'next' ? newStep++ : newStep--
    if (newStep > 0 && newStep <= 6) {
      this.setState({
        currentStep: newStep
      });
    }
  }
  handleChange = input => e => {
    this.setState({ [input]: e.target.value });
  };

  continue = e => {
    e.preventDefault();
    this.props.nextStep();
  };

  back = e => {
    e.preventDefault();
    this.props.prevStep();
  };
  render () {
    const stepsArray = [
      'ورود اطلاعات اولیه',
      'توضیحات فرصت شغلی',
      'نیازمندی ها',
      'تایید اطلاعات',
      'ثبت'
    ]
    const { Formstep } = this.Formstate
    const {currentStep} = this.state 
    const {Title,ActivationDate,ExpirationDate,DirectManager,HRBP,Detailss,MinE,WType,Address,Department,Salary } = this.Formstate;
    const values1 ={Title,ActivationDate,ExpirationDate,DirectManager,HRBP}
    const values2={Detailss}
    const values3={MinE,WType,Address,Department,Salary}
    const fullValues ={Title,ActivationDate,ExpirationDate,DirectManager,HRBP,Detailss,MinE,WType,Address,Department,Salary}
    return (
      <div>
        <HRPanel />
        <div>
          <WidgetContainer>
            <Widget padding style={{    fontFamily: 'IranSans',
            textAlign: 'right',
            fontSize: '14px',
            height: '20px',
            boxShadow: '1px 1px 1px 0px #888888',
            backgroundColor: '#f3eaf7'}}>
              <h3 style={{
                position: 'relative',
                bottom: '12px'
              }}
              >
               اضافه کردن فرصت شغلی جدید
              </h3>
            </Widget>
          </WidgetContainer>
        </div>
        <WidgetContainer>
          <Stepper steps={stepsArray} currentStepNumber={currentStep - 1} />
        </WidgetContainer>
        <div>
        {(()=>{
          switch (Formstep) {
            case 1:
              return(
                <MainInfo
                  nextStep={this.nextStep}
                  handleChange={this.handleChange}
                  values1={values1}
                />
              )
            case 2:
              return(
                <Details
                nextStep={this.nextStep}
                prevStep={this.prevStep}
                handleChange={this.handleChange}
                values2={values2}
                />
              )
            case 3:
              return(
                <AdditionalInfo
                nextStep={this.nextStep}
                prevStep={this.prevStep}
                handleChange={this.handleChange}
                values3={values3}
                />
              )
            case 4:
              return(
                <Confirmation
                nextStep={this.nextStep}
                prevStep={this.prevStep}
                fullValues={fullValues}
                />
              )
            case 5:
              return(
                <Accepted/>
              )
          }
        })()}


        </div>    
        <div className='buttons-container'>
           <button onClick={(e) => {this.handleClick(); this.back(e)}} className='previous'>قبلی</button> 
           <button form='my-form' type='submit' onClick={(e) =>{this.handleClick('next'); this.continue(e)}} className='next'>ادامه</button>   
         </div>

      </div>
    )
  }
}

export default CreateJob

Answer 1

this.props.nextStep 不是一个功能 - 因为你的道具​​没有这样的功能 尝试直接使用

this.nextStep();