无法在React中获取prop的值

Question

第一次在这里发布，所以希望我能解释这个正确...我正在React中构建一个多步骤表单，我想在其中一个步骤中显示可变数量的输入字段。所需的字段数在类组件的状态中设置。

当我仅输入一个数字即渲染所需的代码时，代码按计划工作，但是当我尝试将'num'声明为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>         
     )
   }

我还尝试在类组件中使用吸气剂，并将其正确记录到控制台，但是我仍然无法获取该值并在我的函数中使用它。

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也不起作用。

[我觉得我缺少明显的东西，或者可能只是完全以错误的方式这样做。

试图在此处限制内容的数量（也为避免尴尬），因此尚未发布完整的代码，例如handlechange和下一个/上一个步骤功能等，但是如果您需要更多信息来回答此问题，请告诉我问题更好。

Answer 1

您需要将'number'属性传递给Step2组件。

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

Answer 2

在您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});