在 React JS 上遇到“TypeError：this.props.newClient 不是函数”答案

【问题标题】：Encounterd "TypeError: this.props.newClient is not a function" on React JS在 React JS 上遇到“TypeError：this.props.newClient 不是函数”
【发布时间】：2020-03-29 03:03:33
【问题描述】：

我正在调用我在类 QueNumber 函数 continue 中创建的箭头函数。这是通过 onClick={this.continue} 分配给“下一步”按钮的，但单击时出现错误“TypeError: this.props.newClient is not a function”。

提前致谢，代码如下。

我已经编辑了代码以包含我渲染 QueNumber 组件的 main.js。

// QueNumber.JS
import React, {Component} from 'react';
class QueNumber extends Component {
    continue = e => {
        e.preventDefault();
        this.props.newClient();
        }
    back = e => {
        e.preventDefault();
        this.props.prevStep();
    }
    render(){
        return(
            <>
            <h2>Your Queue Number</h2>
            <button className="Back" onClick={this.back}>
                « Cancel
            </button>
            <button className="Next" onClick={this.continue}> 
                 Exit
            </button> 
            </>
        )
    }
}

export default QueNumber;

// Main.js
import React, {Component} from 'react';
import Welcome from './Welcome';
import Transaction from './Transaction';
import CashDeposit from './CashDeposit';
import AnotherTx from './AnotherTx';
import Summary from './Summary';
import QueNumber from './QueNumber';

export class StepForm extends Component {
    constructor(props){
        super(props);
    }
    state ={
        step: 1, 
        // welcome
        qNumber:1,
        accountNumber:0,
        amount:0
    }

    nextStep=()=> {
        const {step}=this.state;
        this.setState({
            step: step + 1
        });
    }

    prevStep=() => {
        const {step}= this.state;
        this.setState({
            step: step -1
        });
    }

    newClient =() => {
        const {qNumber}=this.state;
        // q number should only increment upon exit
        // save the q number on localstorage
        this.setState({
            qNumber:qNumber+1
        });
        // force the step as first step
        this.setState({
            step: 1
        });
    }

    handleChange=input=> e => {
        this.setState({[input]:e.target.value});
    }

    showStep = () => {
        const {step,qNumber, accountNumber, amount}=this.state;

        if (step===1)
            return (<Welcome
                nextStep={this.nextStep}
                handleChange={this.handleChange}
                />);
        if(step===2)
            return (<Transaction
                nextStep={this.nextStep}
                prevStep={this.prevStep}
                handleChange={this.handleChange}
                />);
        if(step===3)
            return (<CashDeposit
                nextStep={this.nextStep}
                prevStep={this.prevStep}
                qNumber={qNumber}
                handleChange={this.handleChange}
                accountNumber={accountNumber}
                amount={amount}
            />);
        if(step===4)
            return (<AnotherTx
                nextStep={this.nextStep}
                prevStep={this.prevStep}
                handleChange={this.handleChange}
            />);
        if(step===5)
            return (<Summary
                nextStep={this.nextStep}
                prevStep={this.prevStep}
                handleChange={this.handleChange}
            />);
        if(step===6)
            return (<QueNumber
                prevStep={this.prevStep}
            />);
    }

    render(){
        const {step}=this.state;
        const {qNumber}=this.state;
        return(
            <>
                <h2>Step {step} of 6.</h2>
                <h3>Queue Number {qNumber}</h3>
                {this.showStep()} 
            </>
        );
    }

}

export default StepForm;

【问题讨论】：

你能分享你渲染QueNumber的代码吗？
将编辑我的帖子以包含 Main.js。谢谢

标签： reactjs typeerror

【解决方案1】：

你只是忘了传递实际的道具

if(step===6)
  return (
    <QueNumber
      prevStep={this.prevStep}
      newClient={this.newClient}//<- You're missing this prop
    />
  );
}

【讨论】：

酷。不要忘记标记正确的问题并为有用的帖子点赞。

【解决方案2】：

您在类组件中缺少构造函数。使用这个编辑过的代码

import React, {Component} from 'react';

class QueNumber extends Component {
    // Newly added constructor
    constructor(props) {
        super(props);
    }

    continue = e => {
        e.preventDefault();
        this.props.newClient();
        }
    back = e => {
        e.preventDefault();
        this.props.prevStep();
    }
    render(){
        return(
            <>
            <h2>Your Queue Number</h2>
            <button className="Back" onClick={this.back}>
                « Cancel
            </button>
            <button className="Next" onClick={this.continue}> 
                 Exit
            </button> 
            </>
        )
    }
}

export default QueNumber;

【讨论】：

添加了这个，但错误仍然相同。我已经在代码窗口上发布了 main.js。

【解决方案3】：

通过您共享的代码，您实际上并没有将 newClient 属性传递给 QueNumber 组件，因此错误是预期的错误。

检查您的showStep() 方法，它应该将newClient 方法与prevStep 方法一起传递给渲染组件（QueNumber），如下所示：

       if(step===6)
        return (<QueNumber
            prevStep={this.prevStep}
            newClient={this.newClient}
        />);

当然，请确保 this.newClient 是在您的父组件中定义的有效方法。

我建议你添加 propTypes 定义，这样你就可以清楚地知道你的组件应该明确接收哪些 props。

【讨论】：