尽管已经在componentDidMount（）中设置了信息，但是在已经访问它之后，路由回它的组件仍无法以状态显示信息？

Question

Having an issue where my component, Offers, which is supposed to load offers on current items for the user, will not load the offers after leaving the route and coming back to it (unless I refresh the page). I have tried a million different ways to fix this and cannot get it to work. I have my state filled in componentDidMount(), which calls two functions to load the current user data and the current user offer data into state. Shouldn't componentDidMount() fire every time I route to the component? When i console.log state after routing back, the offers array is empty.

import React, { Component } from 'react';
import App from "./App";
import firebase from "./firebase.js";
import {Redirect} from "react-router-dom";
import 'antd/dist/antd.css';
import { Layout, Form, Input, Icon, Card, Button, Col, Row, Menu, Avatar, Modal, DatePicker} from 'antd';
import './Offers.css';
import moment from 'moment';

const {RangePicker } = DatePicker;
const { Meta } = Card;
const { SubMenu } = Menu;
const { Header, Content, Footer, Sider } = Layout;
const Search = Input.Search;
const InputGroup = Input.Group;
const { TextArea } = Input;
const FormItem = Form.Item;


export default class Offers extends Component {
constructor(props) {
super(props);
this.state = {
    name: "",
    userid: "",
    password: "",
    redirect: false,
    redirectTarget: "",
    currentVendorItems: [],
    user: [],
    currentUserName: '',
    currentUserDescription: '',
    visible: false,
    description: '',
    currUserBuyerArray: [],
    currUserVendorArray: [],
    requestedPrice: 'None',
    rentalTime: [],
    visible: false,
    };
}

//Router
redirect = e => {
    this.setState({
        redirect: true, 
        redirectTarget: e
    });
}

//Handles canceling an offer, and therefore deleting it
handleDelete = (e) =>{
    firebase.database().ref('offers/' + e.id).remove();

    // **** Might need to just remove it from the current state array to save time ****
    this.getOfferInfo();
    this.handleRented(e.itemID, false);
}

//Handles vendor rejecting, so buyer can cancel or make a counter offer
handleReject = (e) =>{
    firebase.database().ref('offers/' + e.id).update({
        status: "Rejected"
    });
    this.getOfferInfo();
}

//Handles acceptance of an offer, buyer now will have option to pay
handleAccept = (e) =>{
    firebase.database().ref('offers/' + e.id).update({
        status: "Accepted"
    });
    this.getOfferInfo();
    this.handleRented(e.itemID, true);
}

handleRented = (e, boolean) =>{
    firebase.database().ref('items/' + e).update({
        itemRented: boolean
    });
}

//Modal Functions
showModal = () => {
    this.setState({
      visible: true,
    });
}

handleOk = (e) => {
    this.setState({
      visible: false,
    });
}

handleCancel = (e) => {
    this.setState({
      visible: false,
    });
}

//Disables days before the current day
disabledDate = (current) => {
  // Can not select days before today and today
  return current && current < moment().endOf('day');
}

//Handles time string entered
handleTime = (value, dateString) => {
  this.setState({
    rentalTime: dateString
  })
}

//Handles additonal info inputted
handlePrice = (e) => {
    e.preventDefault();
    this.setState({
        requestedPrice: e.target.value
    });
}

//Handles submission of a counter offer on a rejected item
handleSubmit = (date, reqPrice, offerID) => {
    firebase.database().ref('offers/' + offerID).update({
        status: "Pending",
        date: date,
        requestedPrice: reqPrice
    });
    this.getOfferInfo();
    this.handleCancel();
}

getUserInfo = () => {
    firebase.auth().onAuthStateChanged( authUser => {
      if (authUser) {
        // User is signed in.
        //Auth database reference
        var user = firebase.auth().currentUser
        this.setState({
            user: firebase.auth().currentUser
        });

      } else {
        // No user is signed in.
        console.log('we messed up somewhere!')
      }
    });
}

getOfferInfo = () =>{        
    const currUserOffersRef = firebase.database().ref('offers/');
    currUserOffersRef.on('value', (snapshot) => {
        let offersSnapshot = snapshot.val();

        let buyerOffersArray = []
        let vendorOffersArray = []

        for (let offer in offersSnapshot) {
            //If the user id == the user id on the offer, they made it
           if (this.state.user.uid === offersSnapshot[offer].userUID){
            buyerOffersArray.push({
                id: offer,
                name: offersSnapshot[offer].name,
                date: offersSnapshot[offer].date,
                info: offersSnapshot[offer].info,
                itemID: offersSnapshot[offer].itemID,
                userUID: offersSnapshot[offer].userUID,
                vendorUID: offersSnapshot[offer].vendorUID,
                price: offersSnapshot[offer].price,
                requestedPrice: offersSnapshot[offer].requestedPrice,
                status: offersSnapshot[offer].status,
            });
           }
           //if the user id == the vendor id on the offer, they created the listing
           if (this.state.user.uid === offersSnapshot[offer].vendorUID){
            vendorOffersArray.push({
                id: offer,
                name: offersSnapshot[offer].name,
                date: offersSnapshot[offer].date,
                info: offersSnapshot[offer].info,
                itemID: offersSnapshot[offer].itemID,
                userUID: offersSnapshot[offer].userUID,
                vendorUID: offersSnapshot[offer].vendorUID,
                price: offersSnapshot[offer].price,
                requestedPrice: offersSnapshot[offer].requestedPrice,
                status: offersSnapshot[offer].status,
            });
           }
        }
        this.setState({
            currUserBuyerArray: buyerOffersArray,
            currUserVendorArray: vendorOffersArray
        });
        })
}

// On component mount, get info from DB and auth as well as the offer info
componentDidMount() {
    this.getUserInfo();
    this.getOfferInfo();
}

render() {
    //Router
    if(this.state.redirect === true){
        return <Redirect to= {this.state.redirectTarget} />;
    }
    console.log(this.state)
    return (
    <Layout>
    <Layout className="layout-header">
        <Header>
            <div className="logo" />
            <Menu
            theme="dark"
            mode="horizontal"
            defaultSelectedKeys={['2']}
            style={{ lineHeight: '64px' }}
            >
            <Menu.Item key="1" onClick={e => this.redirect("/Marketplace")}>Marketplace</Menu.Item>
            <Menu.Item key="2" onClick={e => this.redirect("/Profile")}>Profile</Menu.Item>
            <Menu.Item key="3" onClick={e => this.redirect("/VendorPage")}>Create Listing</Menu.Item>
            </Menu>
        </Header>

    <Layout className="layout-main">
        <Sider width={300} style={{ background: '#fff' }}>
            <Menu
              mode="inline"
              defaultSelectedKeys={['3']}
              style={{ height: '100%', borderRight: 0 }}
            >
            <Menu.Item key="1" onClick={e => this.redirect("/Profile")}>Profile</Menu.Item>
            <Menu.Item key="2" onClick={e => this.redirect("/MyItems")}>My Items</Menu.Item>
            <Menu.Item key="3">Offers</Menu.Item>
            </Menu>
        </Sider>
        <Layout className="layout-profile">
            <div className= "offers-other-items" style={{margin: 40}}>
            <Row>
                <Col span = {22}>
                <Card title="My Offers">
                { //Checks if the array is empty, and lets the user know if there are no offers
                    (this.state.currUserBuyerArray.length == 0)
                    ? <div>You have no current offers on items</div> 
                    : 
                    <div> 
                    {this.state.currUserBuyerArray.map(offer => {
                    return (
                    <div>
                    <Row>
                    <Col span={20} offset={2}>
                        <div className="card" style={{background: "#c4c4c4", width: "100%", margin: "0 auto"}}>
                        <Card className="card-content" title={offer.name + "  -  " + offer.status}>
                        Intial Price: ${offer.price} <br/>
                        Requested Price: ${offer.requestedPrice} <br/>
                        Requested Dates: {offer.date[0]}  to  {offer.date[1]} <br/>
                        <div>
                            {
                                (offer.status === "Pending")  
                                ? <div className="offersButton">
                                <Button type="primary" icon="delete" onClick={e => this.handleDelete(offer)}>Cancel Offer</Button>
                                </div>
                                : <div></div>
                            }
                            {
                                (offer.status === "Accepted")  
                                ? <div className="offersButton">
                                <Button type="primary" icon="delete" onClick={e => this.handleDelete(offer)}>Cancel Offer</Button>
                                <Button type="primary" icon="check" onClick={e => this.handlePayment(offer.id)}>Payment</Button>
                                </div>
                                : <div></div>
                            }
                            {
                                (offer.status === "Rejected")  
                                ?
                                <div className="offersButton">
                                <Button type="primary" icon="delete" onClick={e => this.handleDelete(offer)}>Cancel Offer</Button> 
                                <Button type="primary" icon="check" onClick={e => this.showModal()}>Make another Offer</Button>
                                <Modal
                                  visible={this.state.visible}
                                  onOk={this.handleOk}
                                  onCancel={this.handleCancel}
                                  footer={[
                                    <Button key="back" onClick={this.handleCancel}>Cancel</Button>,
                                    <Button type="primary" onClick={e => this.handleSubmit(this.state.rentalTime, this.state.requestedPrice, offer.id)}>
                                    Request
                                    </Button>
                                  ]}
                                >
                                <RangePicker
                                    disabledDate={this.disabledDate}
                                    format="MM-DD-YYYY"
                                    placeholder={['Start Time', 'End Time']}
                                    onChange={this.handleTime}
                                />
                                <p style = {{color: "red"}}> {this.state.errorMessage}</p>
                                <p>Request a different price (Optional)</p>
                                <Input
                                    placeholder="Requested Price"
                                    onChange={this.handlePrice}
                                />
                                </Modal>
                                </div>
                                : <div></div>
                            }        
                        </div>
                        </Card>
                        </div>
                    </Col>
                    </Row>
                    <br />
                    </div>
                    )
                    })
                    }
                    </div> 
                    }
                </Card>
                </Col>
            </Row>
            </div>
            <div className="offers-my-items" style={{margin: 40}}>
            <Row>
                <Col span = {22}>
                <Card title="Offers on my Items">

                { //Check if message failed
                    (this.state.currUserVendorArray.length == 0)
                    ? <div>There are no offers on your items</div> 
                    : 
                    <div>
                    {this.state.currUserVendorArray.map(offer => {
                    return (
                    <div>
                    <Row>
                    <Col span={20} offset={2}>
                        <div className="card" style={{background: "#c4c4c4", width: "100%", margin: "0 auto"}}>
                        <Card className="card-content" title={offer.name + "  -  " + offer.status}>
                        Intial Price: ${offer.price} <br/>
                        Requested Price: ${offer.requestedPrice} <br/>
                        Requested Dates: {offer.date[0]}  to  {offer.date[1]} <br/>
                        <div>
                            {
                            (offer.status === "Pending")  
                            ? <div className="offersButton">
                            <Button type="primary" icon="delete" onClick= {e => this.handleReject(offer.id)}>Reject</Button>
                            <Button type="primary" icon="check" onClick= {e => this.handleAccept(offer)}>Accept</Button>
                            </div>
                            : <div></div>
                            }
                            {
                            (offer.status === "Rejected")  
                            ? <div className="offersButton">
                            <p>Awaiting counter offer from buyer, or you can delete the offer </p>
                            <Button type="primary" icon="delete" onClick= {e => this.handleDelete(offer)}>Cancel Offer</Button>
                            </div>
                            : <div></div>
                            }
                        </div>
                        </Card>
                        </div>
                    </Col>
                    </Row>
                    <br/>
                    </div>
                    )
                    })
                    }    
                </div> 
                }
                </Card>
                </Col>
            </Row>
            </div>
        </Layout>
        </Layout>
        </Layout>
    </Layout>
    );
    }
}