为什么我的 reactstrap Collapse 不反映我的初始或更改 state

Question

I am trying to use reactstrap's Collapse to collapse two alternating sections.

import React, { Component, Fragment, Suspense } from "react";
import ReactDOM from 'react-dom';
import { PDFViewer } from '@react-pdf/renderer'
import NewWindow from 'react-new-window'
import Config from 'config';
import { Button, Collapse } from 'reactstrap';
import { formatter } from '../common.js'
import { format } from 'date-fns';
import Pagination from '../Pagination';
import "./Order.css";
import Modal from 'react-modal';
import PaymentModal from './paymentModal.js';
import Invoice from './Reports/Invoice';

Modal.setAppElement('#root');

let PageSize = 25;

class Portal extends React.Component {
    constructor() {
        super();
        this.state = {
            name: 'React',
            apiData: [],
            currentPage: 1,
            currentTableData: [],
            orderList: [],
            isOpen: false,
            pdfView: null,
            viewInvoices: true,
            viewOrders: false
        };
    }

    showInvoices() {
        console.log("Show Invoices Clicked")
        this.setState({ viewInvoices: true });
        this.setState({ viewOrders: false });
    }

    showOrders() {
        console.log("Show Orders Clicked")
        this.setState({ viewInvoices: false });
        this.setState({ viewOrders: true });
    }

    async componentDidMount() {        
        console.log('app mounted');

        const tokenString = sessionStorage.getItem("token");
        const token = JSON.parse(tokenString);

        let headers = new Headers({
            "Accept": "application/json",
            "Content-Type": "application/json",
            'Authorization': 'Bearer ' + token.token
        });
        
        const response = await fetch(Config.apiUrl + `/api/Orders/GetAllInvoices`, {
            method: "GET",
            headers: headers
        });
        const json = await response.json();
        console.log(json);
        this.setState({ orderList: json });
    }

    componentDidUpdate(_, prevState) {
        console.log('Component Updated');
        if (prevState.currentPage !== this.state.currentPage || prevState.orderList !== this.state.orderList) {
            const firstPageIndex = (this.state.currentPage - 1) * PageSize;
            const lastPageIndex = firstPageIndex + PageSize;
            this.setState({ currentTableData: this.state.orderList.slice(firstPageIndex, lastPageIndex) });
        }
    }
    
    render() {
        const orders = this.state.orderList;
        const currentTableData = this.state.currentTableData;
        const { isOpen } = this.state;
           

        let onRequestClose = () => {
            this.setState({ isOpen: false });
        }

        let handleClick = () => {
            console.log("Clicked")
            this.setState({ isOpen: true });
        }        

        function handleInvoiceClick(e, invoice) {            
            e.preventDefault();
            console.log(`invoice: ${JSON.stringify(invoice)}`)
            if (this.state.pdfView === null) {
                const headerString = sessionStorage.getItem("header");
                const header = JSON.parse(headerString);
                const buff = new Buffer(header.logoImage, 'base64');                
                let pdf = (       
                    <PDFViewer width="1000" height="600" className="portal">                            
                        <Invoice invoice={invoice} buff={buff} />                            
                    </PDFViewer>
                );
                this.setState({ pdfView: pdf });
            } else {
                this.setState({ pdfView: null });
            }
        }

        handleInvoiceClick = handleInvoiceClick.bind(this);

        return (
            <div id="bootstrap-overrides">
                <h2>Portal</h2>
                <div className="row">
                    <div className="block col-1">
                        <p><button onClick={this.showInvoices.bind(this)}>Invoices</button></p>
                        <p><button onClick={this.showOrders.bind(this)}>Orders</button></p>
                    </div>
                    <div className="block col-2">
                        <br />
                        {this.state.pdfView}
                        <Collapse isOpen={this.state.showInvoices}>
                            <h3>Open Invoices</h3>
                            <h4>A list of completed orders purchased under this account.</h4>
                            <table className="table table-striped table-bordered">
                                <thead>
                                    <tr>
                                        <th className="number">Invoice Number</th>
                                        <th className="date">Invoice Date</th>
                                        <th className="date">Due Date</th>
                                        <th className="amount">Total</th>
                                        <th className="customer">Ship To</th>
                                        <th className="date">Actual Ship Date</th>
                                        <th className="button"></th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {currentTableData && currentTableData.map(order =>
                                        <>
                                            <tr key={order.sopnumbe}>
                                                <td><a href="#" onClick={(e) => handleInvoiceClick(e, order)}>{order.sopnumbe}</a></td>
                                                <td>{format(Date.parse(order.invodate), 'MM/dd/yyyy')}</td>
                                                <td>{format(Date.parse(order.duedate), 'MM/dd/yyyy')}</td>
                                                <td>{formatter.format(order.docamnt)}</td>
                                                <td>{order.custname}</td>
                                                <td>{format(Date.parse(order.actlship), 'MM/dd/yyyy')}</td>
                                                <td><Button className="BtnPay" onClick={handleClick}>Pay</Button></td>
                                            </tr>
                                            {isOpen ? <PaymentModal invoice={order} onRequestClose={onRequestClose} /> : null}                                
                                        </>
                                    )}
                                </tbody>
                            </table>                
                            <Pagination
                                className="pagination-bar"
                                currentPage={this.state.currentPage}
                                totalCount={orders.length}
                                pageSize={PageSize}
                                onPageChange={page => this.setState({ currentPage: page })}
                                />
                        </Collapse>
                        <Collapse isOpen={this.state.showOrders}>
                            <h3>Open Orders</h3>
                            <h4>A list of completed orders purchased under this account.</h4>
                        </Collapse>
                    </div>
                </div>
            </div>
        );
    }
}
export default Portal;

The isOpen doesn't seem to be reading my state . The Portal loads with both sections collapsed. My two buttons run (I get a console log entry for both) but don't effect the display. I would think the initial Invoice should be open as well. Why does my reactstrap Collapse element not reflect my initial or changed state? Do I need to add anything to componentDidUpdate ? Any tips or advice will be appreciated.

reactstrap = reactstrap@9.0.1

Answer 1

I think you are using the wrong variables

<Collapse isOpen={this.state.showInvoices}>
<Collapse isOpen={this.state.showOrders}>

should be

<Collapse isOpen={this.state.viewInvoices}>
<Collapse isOpen={this.state.viewOrders}>

The show.. ones are the functions. The isOpen expects a boolean value