“无法对”“this.props.reservation”“的属性”“保留”“进行结构分析，因为它未定义”“并筛选它”“ReactJs

Question

我拿到房间的时候，无法从我的服务生那里得到预订。我使用几乎相同的方法，但我不明白为什么我不能访问它们。我需要从我的服务器获取预订，并根据用户ID和存储在预订模式中的用户ID对其进行过滤。

下面是我访问这些项目的方式：

​

import { connect } from 'react-redux';
import { getReservations } from '../actions/bookAction';

import PropTypes from 'prop-types';

class Dashboard extends Component {

    static propTypes = {
        getRooms: PropTypes.func.isRequired,
        getReservations: PropTypes.func.isRequired,
        room: PropTypes.object.isRequired,
        auth: PropTypes.object.isRequired,
        reservation: PropTypes.object.isRequired
    };

    componentDidMount() {
        this.props.getReservations();
        this.props.getRooms();
    };

    render() {

        
        const { reservations } = this.props.reservation || {} 

        const { rooms } = this.props.room;

        const { isAuth, user } = this.props.auth;

        const DashUnauth = (
            <>
            <TopCont>
                <h1>Questa è un'area riservata.</h1>
                <Link className="btn-primary" to="/signin">Accedi</Link>
                <Link className="btn-primary" to= "/signup">Registrati</Link>
            </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>
                </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(({ room_name, prezzo, checkin_date, checkout_date, ospiti }) => (  
                                <tbody>
                                    <tr>
                                        <td>{room_name}</td>
                                        <td>{ospiti}</td>
                                        <td>{checkin_date}</td>
                                        <td>{checkout_date}</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 mapStateToProps = state => ({
    room: state.room,
    auth: state.auth,
    reservation: state.reservation
});

export default connect(mapStateToProps, { getRooms, deleteRoom, getReservations })(Dashboard);

​

在这一点上，它抛出了一个类似Cannot destructure property 'reservatios' of 'this.props.reservations' as it is undefined的错误。

有人能帮我吗？

Answer 1

你搞混了你的语法。现在，您正在查找this.props.reservations上的属性reservations，因此您正在查找this.props.reservations.reservations。这会给您一个错误，因为您将this.props.reservations视为object，但它可能是undefined，并且您无法解析undefined。

您想要从this.props中解构reservations，或者访问该属性，而不是同时访问两者。

const reservations = this.props.reservations || {} 

或

const { reservations = {} } = this.props

room也是如此！

编辑：现在我发现您在propTypes中定义的属性名称是reservation (单数)而不是reservations (复数)。