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

Question

我正在调用在类QueNumber函数内部创建的箭头函数，请继续。通过onClick = {this.continue}将其分配给“下一步”按钮，但单击时出现错误“ TypeError：this.props.newClient不是函数”。

谢谢，下面的代码。

---

我已经编辑了代码，在其中包含渲染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;

Answer 1

您在类组件中缺少构造函数。使用此修改后的代码

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;