无法在 React 中检索 prop 的值

Question

First time posting on here, so hopefully I explain this right...I'm building a multi-step form in React, and I want to display a variable number of input fields in one of those steps. The number of fields required is set in the state of a class component.

The code works as planned when I just enter a number ie renders what I want it to, but not when I try to declare 'num' as props.number

It doesn't throw an error, just displays nothing. Seems to retrieve the value of props.currentStep just fine. In fact, if i let num = props.currentStep, it renders the corresponding number of fields.

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

I also tried using a getter in the class component, and that logs the number correctly to the console, but I still can't get the value and use this in my function.

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

Even with the getter, let num = props.Number does not work.

I feel like I'm missing something obvious, or maybe just doing this completely the wrong way.

Trying to limit the volume of content here (also for fear of embarrassment), so haven't posted the entire code ie the handlechange, and next/previous step functions etc. but let me know if you need more info to answer this question better.

Answer 1

您需要将“数字”道具传递给 Step2 组件。

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

Answer 2

In you Step2 component you are not passing a prop called number instead you are passing a prop called currentStep . Try passing the number to the component like this

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

What is the purpose of the function

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

you don't need to have something like this instead you can access the number as this.state.number . and if you want to change it create a function like this

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