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

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