reactjs - 如何通过 <b>{qNumber} 向组件显示整数值。下面的代码

Question

qNumber 状态变量已在 Main.js 中定义。我已经在调用 QueNumber.js 组件时包含了 qNumber。在 QueNumber.js 组件上，我无法通过{qNumber}显示 qNumber 。

请检查我的以下代码。

qNumber 已被定义为状态变量。我确信 qNumber 有内容。

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:'',
        amount:'',
        txNumber: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
        });
    }

    incTxNumber =() => {
        const {txNumber}=this.state;
        this.setState({
            txNumber:txNumber+1
        });
    }

    resetInfo =() => {
        const {accountNumber,amount}=this.state;
        this.setState({
            accountNumber:'',amount:''
            });
    }

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

    }

    showStep = () => {
        const {step,qNumber, accountNumber, amount,txNumber}=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}
                incTxNumber={this.incTxNumber}
            />);
        if(step===4)
            return (<AnotherTx
                nextStep={this.nextStep}
                prevStep={this.prevStep}
                handleChange={this.handleChange}
                resetInfo={this.resetInfo}
            />);
        if(step===5)
            return (<Summary
                nextStep={this.nextStep}
                prevStep={this.prevStep}
                handleChange={this.handleChange}
            />);
        if(step===6)
            return (<QueNumber
                prevStep={this.prevStep}
                newClient={this.newClient}
                qNumber={this.qNumber}
            />);
    }

    render(){
        // const {step}=this.state;
        // const {qNumber}=this.state;
        // const {txNumber}=this.state;
        return(
            <>
                {/* <h2>Step {step} of 6.</h2>
                <h2>THIS IS Q NUMBER {qNumber}</h2>
                <h2>Transaction Number {txNumber}</h2> */}
                {this.showStep()} 
            </>
        );
    }
}
export default StepForm;
------
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(){
        const {qNumber}=this.props;
        return(
            <>
            <h1>This is your Queue number: <b>{qNumber}</b></h1>
            <button className="Back" onClick={this.back}>
                « Cancel
            </button>
            <button className="Next" onClick={this.continue}> 
                 Exit
            </button> 
                    {/* this should exit the program back to main */}
            </>
        )
    }
}
export default QueNumber;

标签： reactjsvariablesstate

Answer 1

在您传递的 QNumber 组件中，this.qNumber它应该是this.state.qNumber