无法在 React 中检索 prop 的值

Question

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

当我只输入一个数字时，代码按计划工作，即呈现我想要的内容，但当我尝试将 '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 组件中使用 getter，这将数字正确地记录到控制台，但我仍然无法获取值并在我的函数中使用它。

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>
    )
  }
}

即使使用 getter，let num = props.Number 也不起作用。

我觉得我遗漏了一些明显的东西，或者可能只是以完全错误的方式做这件事。

尽量限制这里的内容量（也是怕尴尬），所以没有发布完整的代码，即 handlechange 和 next/previous 步骤函数等，但如果您需要，请告诉我更多信息可以更好地回答这个问题。

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

无法在 React 中检索 prop 的值

Not able to retrieve value of prop in React

javascript

class

jsx

reactjs

react-component