Не удалось получить значение проп в React

Question

При первой публикации здесь, надеюсь, я объясню это правильно ... Я создаю многошаговую форму в React и хочу отобразить переменное количество полей ввода на одном из этих шагов. Количество обязательных полей устанавливается в состоянии компонента класса.

Код работает, как и планировалось, когда я просто ввожу число, то есть отображает то, что мне нужно, но не когда я пытаюсь объявить 'num' as props.number

Не выдает ошибку, просто ничего не отображается. Кажется, просто получить значение props.currentStep. Фактически, если я позволю num = props.currentStep, он отобразит соответствующее количество полей.

    function Step2(props) {
      let num = props.number;
      let i = 0
      if (props.currentStep !== 2) {
        return null
      } 
      return(
        <React.Fragment>
          <div>
            {Array(num).fill().map(() => {
               i += 1
               return (
                 <div key={i}>
                   <TextField 1>
                   <TextField 2>
                 </div>
               )
             })
           }     
         </div>
       </React.Fragment>         
     )
   }

Я также пытался использовать метод get в компоненте класса, и он правильно записывает число в консоль, но я все еще не могу получить значение и использовать его в своей функции.

class Form extends Component {

  constructor(props) {
    super(props)

    this.state = {
      currentStep: 1,
      number: 3,

      get Number() {
        let result = this.number;
        console.log(result);
        return result
      }
    }
  }

  render() {
    return (
      <div>
        <React.Fragment>       
          <form>     
            <Step1 
              currentStep={this.state.currentStep} 
            />
            <Step2 
              currentStep={this.state.currentStep} 
            />
            <Step3 
              currentStep={this.state.currentStep} 
            />
          </form>
        </React.Fragment>
      </div>
    )
  }
}

Даже с получателем, пусть num = props.Number не работает.

Мне кажется, что я упускаю что-то очевидное или, возможно, просто делаю это совершенно неправильно.

Попытка ограничить объем контента здесь (также из-за боязни смущения), поэтому не публикуем весь код, т. Е. Смену ручки, функции следующего / предыдущего шага и т. Д. c. но дайте мне знать, если вам нужно больше информации, чтобы лучше ответить на этот вопрос.

Answer 1

В вашем Step2 компоненте вы не передаете реквизит с именем number , вместо этого вы пропускаете реквизит с именем currentStep . Попробуйте передать число компоненту следующим образом:

<Step2 currentStep={this.state.currentStep} number={this.state.number} />;

Какова цель функции

  get Number() {
    let result = this.number;
    console.log(result);
    return result
  }

Вам не нужно иметь что-то подобное, вместо этого вы можете получить доступ к номеру как this.state.number. и если вы хотите изменить его, создайте функцию, подобную этой

changeNumber=(number)=> this.setState({number:number});

Answer 2

Вам необходимо передать реквизит 'number' компоненту Step2.

<Step2 currentStep={this.state.currentStep} number={this.state.number} />;