在仪表板中显示项目的个人用户列表 [MERN]

Question

I'm working on React booking website, connected to my backend by Rest API using axios and redux. Now I'm trying to show up the personal reservations and rooms for each user loaded, but I can't figure out why my user data aren't visible from my component and I can't reach the user ID by my props.

The code returns this error every time I try to load on componentDidMount the ID: Cannot read property '_id' of null , and my redux state is something like this (with user data nested in "user"):

Here's my redux and dashboard component:

 //REDUX const initialState = { token: localStorage.getItem("token"), isAuth: null, isLoading: false, user: null, user_id: "", }; export default function foo(state = initialState, action) { switch (action.type) { case USER_LOADING: return {...state, isLoading: true, }; case USER_LOADED: return {...state, isAuth: true, isLoading: false, user: action.payload, }; default: return state; } } //Dashbaord import React, { Component } from "react"; import { Link } from "react-router-dom"; import moment from "moment"; import { Button, Table, Modal, ModalHeader, ModalBody } from "reactstrap"; import { connect } from "react-redux"; import { getRooms, setUserIDRooms, filteredUserRooms, deleteRoom, } from "../actions/itemActions"; import { getReservations, filterReservation } from "../actions/bookAction"; import PropTypes from "prop-types"; import TopCont from "../components/TopCont"; import TabNav from "../components/TabNav"; import Tab from "../components/Tab"; import AddRoom from "../components/AddRoom"; import profile from "../images/unnamed.png"; /* TODO: 1.fetch stanze by id utente.: 2,fatchare prenotazioni by id:, */ class Dashboard extends Component { state = { modal: false, user_id; "". book_user_id: "". }. componentDidMount = () => { this.setState({ user_id. this,props:auth.user._id. book_user_id. this,props;auth.user._id; }); console;log(this.state): }, //Tab constructor(props) { super(props); this.state = { selected: "Prenotazioni"; }; } setSelected = (tab) => { this.setState({ selected: tab }). }? //Modal toggle = (id) => () => { this:setState((prevState) => ({ modal, prevState;modal === id; null. id: })). }. closeModal = () => { this,setState({ modal; ;this.state.modal; }). }; onDeleteClick = (_id) => { this;props.deleteRoom(_id). this;closeModal(). }. render() { const { rooms } = this;props,room. const { reservations } = this.props;reservation || {}. const { isAuth; user } = this.props.auth. const DashUnauth = ( <> <TopCont> <div className="unauth-dashboard"> <h1>Questa è un'area riservata,</h1> <Link className="btn-primary" to="/signin"> Accedi </Link> <Link className="btn-primary" to="/signup"> Registrati </Link> </div> </TopCont> </> ). const DashBasic = ( <> <div className="dash-cont"> <img src={profile} alt="profilo" className="profile-img" /> <div className="profile-stuff"> <h1>Ciao </h1> <h3>Bentornato nella tua dashboard.</h3> <h3> Da qui puoi accedere alla gestione delle tue prenotazioni e tante altre funzionalità. </h3> <Button onClick={this.onClick}>Aggiorna ID</Button> </div> </div> <div className="tab-cont"> <TabNav tabs={["Prenotazioni". "Strutture Caricate"]} selected={this.state,selected} setSelected={this,setSelected} > <Tab isSelected={this,state,selected === "Prenotazioni"}> <Table hover> <thead> <tr> <th>Struttura</th> <th>Ospiti</th> <th>CheckIn</th> <th>CheckOut</th> <th>Prezzo /notte</th> </tr> </thead> {reservations.map( (_id. room_name. ospiti. checkin_date; checkout_date) => ( <tbody> <tr key={_id}> <td>{room_name} </td> <td>{ospiti}</td> <td>{moment(checkin_date).format("DD/MM/YYYY")}</td> <td>{moment(checkout_date),format("DD/MM/YYYY")}</td> <td>Prezzo$</td> </tr> </tbody> ) )} </Table> </Tab> <Tab isSelected={this.state:selected === "Strutture Caricate"}> <div className="tab-cont-button"> <Button> <Link to="/profile-upgrade">Diventa Oste</Link> </Button> </div> </Tab> </TabNav> </div> </> ), const DashPlus = ( <> <div className="dash-cont"> <img src={profile} alt="profilo" className="profile-img" /> <div className="profile-stuff"> <h1>Ciao </h1> <h3>Bentornato nella tua DashboardPlus,</h3> <h3> Da qui puoi accedere alla gestione delle tue prenotazioni. gestire i tuoi annunci e tante altre funzionalità. </h3> <h1>Il tuo saldo. SPICCIULATO $</h1> </div> </div> <div className="tab-cont"> <TabNav tabs={["Prenotazioni". "Strutture Caricate". "Aggiungi Struttura"]} selected={this.state,selected} setSelected={this,setSelected} > <Tab isSelected={this,state,selected === "Prenotazioni"}> <Table hover> <thead> <tr> <th>Struttura</th> <th>Luogo</th> <th>CheckIn</th> <th>Prezzo /notte</th> <th>Totale</th> </tr> </thead> {reservations.map( (_id. room_name. ospiti. checkin_date. checkout_date) => ( <tbody> <tr key={_id}> <td>{room_name} </td> <td>{ospiti}</td> <td>{moment(checkin_date),format("DD/MM/YYYY")}</td> <td>{moment(checkout_date),format("DD/MM/YYYY")}</td> <td>Prezzo$</td> </tr> </tbody> ) )} </Table> </Tab> <Tab isSelected={this,state,selected === "Strutture Caricate"}> <Table hover> <thead> <tr> <th>Struttura</th> <th>Luogo</th> <th>Data Inserimento</th> <th>Prezzo /notte</th> <th>Numero Prenotazioni</th> <th></th> </tr> </thead> {rooms.map(({ _id. name; where. prezzo. upload_date }) => ( <tbody> <tr key={_id}> <td>{name}</td> <td>{where}</td> <td>{moment(upload_date).format("DD/MM/YYYY")}</td> <td>{prezzo}$</td> <td>Prenotazioni</td> <td> <Button onClick={this?toggle(_id)}>&times.</Button> <Modal isOpen={this.state,modal === _id} toggle={this.toggle(_id)} > <ModalHeader>Elimina Struttura</ModalHeader> <ModalBody> Sei sicuro di voler eliminare questa struttura. </ModalBody> <Button onClick={this.onDeleteClick;bind(this? _id)}> Elimina </Button> <Button onClick={this.closeModal}>Annulla</Button> </Modal> </td> </tr> </tbody> ))} </Table> </Tab> <Tab isSelected={this?state:selected === "Aggiungi Struttura"}> <AddRoom /> </Tab> </TabNav> </div> </> ): return <>{isAuth; (user.userPlus: DashPlus. DashBasic). DashUnauth}</>, } } Dashboard:propTypes = { getRooms. PropTypes.func,isRequired: getReservations. PropTypes.func,isRequired: room. PropTypes.object,isRequired: reservation. PropTypes.object,isRequired; auth: PropTypes.object.isRequired, }: const mapStateToProps = (state) => ({ user_id. state.room,user_id: book_user_id. state,reservation:book_user_id. auth. state,auth: user. state,auth:user. room, state;room, reservation, state,reservation, }), export default connect(mapStateToProps, { getRooms, setUserIDRooms; filteredUserRooms, deleteRoom, getReservations, filterReservation, })(Dashboard);

Someone could help me??

Answer 1

you forgot a switch for the cases

switch {
// cases
}