arrays - 如何在组件中显示数组类型的状态变量的内容

Question

我有一个在 Main.js 中定义的数组 postArray。

constructor() {
    super();
    this.state ={
        step: 1, 
        // welcome
        qNumber:1,
        accountNumber:'',
        amount:'',
        txNumber:0,
        postArray : []
    }
}

同样在 Main.js 中，数组由 insertTx 箭头函数填充。需要检查是否正在填充此数组...目前我不知道如何使用 console.log。CashDeposit.js 正在调用此函数。

insertTx =() => {
    // save transaction to array state
    // create copy of the array
    const copyPostArray = Object.assign([],this.state.postArray)
    // insert one element into the array
    copyPostArray.push({
        txNumber: this.txNumber,
        qNumber : this.qNumber,
        accountNumber : this.accountNumber,
        amount :   this.amount
    })
    // save the values back to array state
    this.setState({
        postArray:copyPostArray
    })
}

最后在 Main.js 调用的 Summary.js 上，这将在 render() 上显示 postArray。我很困惑如何使用 map 函数来填充数组，然后才能使用 .

return(
    <>
    <h2>Summary of Transactions</h2>
    Display content of postArray here
    <ul>
        {/* {
        {this.postArray} 
        } */}
    </ul>
    <button className="Back" onClick={this.back}>
        « Cancel
    </button>
    <button className="Next" onClick={this.continue}>
            Confirm »
    </button>
    </>
)
==========
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() {
        super();
        this.state ={
            step: 1, 
            // welcome
            qNumber:1,
            accountNumber:'',
            amount:'',
            txNumber:0,
            postArray : []
        }
    }

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

    insertTx =() => {
        // save transaction to array state
        // create copy of the array
        const copyPostArray = Object.assign([],this.state.postArray)
        // insert one element into the array
        copyPostArray.push({
            txNumber: this.txNumber,
            qNumber : this.qNumber,
            accountNumber : this.accountNumber,
            amount :   this.amount
        })
        // save the values back to array state
        this.setState({
            postArray:copyPostArray
        })
    }

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

    }

    showStep = () => {
        const {step, accountNumber, amount}=this.state;
            // txNumber
        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}
                handleChange={this.handleChange}
                accountNumber={accountNumber}
                amount={amount}
                incTxNumber={this.incTxNumber}
                insertTx={this.insertTx}
            />);
        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}
                postArray={this.state.postArray}
            />);
        if(step===6)
            return (<QueNumber
                prevStep={this.prevStep}
                newClient={this.newClient}
                qNumber={this.state.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;
====
SUMMARY.JS
import React, {Component} from 'react';

class Summary extends Component {
    continue = e => {
        e.preventDefault();
        this.props.nextStep();
    }

    back = e => {
        e.preventDefault();
        this.props.prevStep();
    }

    render(){
//        const {qNumber, accountNumber, amount}=this.props;
//        console.log('our data is',this.props.data)

        // var arrayx = [1,4,9,16];
        // var array1 =  
        // const map1 = array1.map(x=>x*2);

        // console.log(map1);
        // loop thru the data array and do something with each data
        // const namesList =data.map(this.txNumber=>{console.log(this.txNumber)}
            // txNumber: this.txNumber,
            // qNumber : this.qNumber,
            // accountNumber : this.accountNumber,
            // amount :   this.amount


            const { postArray } = this.state;
            return(
              <>
                <h2>Summary of Transactions</h2>
                Display content of postArray here
                <ul>
                  {postArray.map(({ accountNumber, amount, qNumber, txNumber }) => (
                    <li key={`${accountNumber}-${txNumber}`}>
                      <div>
                        AccountNumber: {accountNumber}
                      </div>
                      <div>
                        Amount: {amount}
                      </div>
                      <div>
                        qNumber: {qNumber}
                      </div>
                      <div>
                        txNumber: {txNumber}
                      </div>
                    </li>)
                  )}
                </ul>
                <button className="Back" onClick={this.back}>
                  « Cancel
                </button>
                <button className="Next" onClick={this.continue}>
                  Confirm »
                </button>
              </>
            )
    }
}

导出默认摘要；

CashDeposit.js

import React, {Component} from 'react';

class CashDeposit extends Component {
//    state={qNumber:234};
continue = e => {
        e.preventDefault();
        this.props.nextStep();
        //increment the txNumber
        this.props.incTxNumber();
        this.props.insertTx();
    }

    back = e => {
        e.preventDefault();
        this.props.prevStep();
    }

    render(){
        const {accountNumber, amount,handleChange}=this.props;
           return(
            <>
            <h2>Cash Deposit</h2>
                {/* Queue Number: <b>{qNumber}</b> */}
                Please enter account number and amount.
            <p>
                <label>
                    Account Number
                    <input
                        type="text"
                        name="accountNumber"
                        value={accountNumber}
                        placeholder="Account Number"
                        onChange={handleChange('accountNumber')}
                    />
                </label>
            </p>
            <p>
                <label>
                    Amount        
                    <input
                        type="text"
                        name="amount"
                        value={amount}
                        placeholder="Amount"
                        onChange={handleChange('amount')}
                        />
                </label>
            </p>
            <button className="Back" onClick={this.back}>
                « Back
            </button>
            <button className="Next" onClick={this.continue}>
                    Next »
            </button>
            </>
        )
    }
}

export default CashDeposit;

嗨@Drew 没有错误，但是在运行代码时，当显示事务摘要时，它显示以下值：

交易摘要

在此处显示 postArray 的内容

ID: NaN AccountNumber: Amount: qNumber: txNumber: ID: NaN AccountNumber: Amount: qNumber: txNumber: ID: NaN

我是否正确地在数组上分配值？我已经包含了 CashDeposit.js 组件。

标签： arraysreactjsdictionary

Answer 1

列表和键

const { postArray } = this.props;
return(
  <>
    <h2>Summary of Transactions</h2>
    Display content of postArray here
    <ul>
      {postArray.map(({ accountNumber, amount, qNumber, txNumber }) => (
        <li key={`${accountNumber}-${txNumber}`}>
          <div>AccountNumber: {accountNumber}</div>
          <div>Amount: {amount}</div>
          <div>qNumber: {qNumber}</div>
          <div>txNumber: {txNumber}</div>
        </li>
      ))} 
    </ul>
    <button className="Back" onClick={this.back}>
      « Cancel
    </button>
    <button className="Next" onClick={this.continue}>
      Confirm »
    </button>
  </>
)