无法在 React 中检索 prop 的值答案

【问题标题】：Not able to retrieve value of prop in React无法在 React 中检索 prop 的值
【发布时间】：2020-02-05 07:53:55
【问题描述】：

第一次在这里发帖，所以希望我能正确解释这一点……我正在 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>         
     )
   }

我还尝试在类组件中使用 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 也不起作用。

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

这里试图限制内容的数量（也是为了避免尴尬），所以还没有发布整个代码，即句柄更改和下一个/上一个步骤功能等，但如果您需要更多信息来回答，请告诉我这个问题更好。

【问题讨论】：

标签： javascript reactjs class jsx react-component

【解决方案1】：

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

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

【讨论】：

谢谢...现在我明白我错过了什么。一旦我将 number=this.state.number 添加到渲染的组件，我就可以使用 props.number 在我的函数中获取值（就像我已经对 props.currentStep 所做的一样。我是新手，我是专注于错误的事情试图解决这个问题！再次感谢！

【解决方案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});

【讨论】：