reactjs - material-ui Stepperのステップ数を変更するには?

Question

これらのステップは、ステップ配列の長さである数値を取ります。

    state = {
       steps: [0, 1, 2, 3]
    };

後でこの状態が変わる可能性があります

    this.setState({
      steps: [1,2,3,4]
    });

または

   this.setState({
     steps: [2,3,4,5]
   }); 

等々....

しかし、すべての場合において、私の手順は 1,2,3,4 しか示していません。ステップの配列要素に従ってこれらの数値を変更する必要があります。

これはステッパーのコードです。

<Stepper alternativeLabel nonLinear activeStep={activePage}>
     {steps.map((step, index) => {
       return (
        <Step key={index}>
          <StepButton
            onClick={this.handleStep(index)}
            disabled={dealsLoading}
          >
            </StepButton>
        </Step>
      );
    })}
  </Stepper>

それを達成する方法は？

StepLabel コンポーネントを使用すると、次のようになります

しかし、私はラベルを望んでいません。これらのラベルをステップ ボタンに付けたいと思います。このためのコード:

 <Stepper alternativeLabel nonLinear activeStep={activePage}>
        {steps.map((step, index) => {
          return (
            <Step key={index}>
               <StepLabel 
                  onClick={this.handleStep(step)}
                  disabled={dealsLoading}
               >
                {step}
              </StepLabel>
            </Step>
          );
        })}
      </Stepper>