Question

我想将Firestore数据库中的项目列表提取到组件中。当我控制台登录“项目”时，第一个组件以数组形式显示Firestore中的项目列表，这正是我想要的。

class Landing extends React.Component {
    render() {
        const { items } = this.props;
        console.log(items)
        return (
            <div className="landing">
                <ItemList items={items} />
            </div>
        )
    }
};

const mapStateToProps = state => {
    return ({
        items: state.firestore.ordered.items,
    });
};

export default compose(
    connect(mapStateToProps), 
    firestoreConnect([
        { collection: 'items' }
    ])
)(Landing);

但是，当mapStateToProps在另一个组件中时，控制台日志不会显示数据库中的项目数组。相反，它显示了方法列表。

class BookItem extends React.Component {

    state = {
        startDate: new Date(),
        endDate: null,
        itemId: this.props.itemId,
    };  

    handleChangeStart = date => {
        this.setState({
            startDate: date
        });      
    }

    handleChangeEnd = date => {
        this.setState({
            endDate: date
        });
    }

    handleSubmit = e => {
        e.preventDefault();
        this.props.book(this.state)
    }

    render() {
        const { items } = this.props
        console.log(items)
        return (
            <div className="datePicker">
                <DatePicker
                    selected={this.state.startDate}
                    selectsStart
                    startDate={this.state.startDate}
                    endDate={this.state.endDate}
                    onChange={this.handleChangeStart}
                />
                <button onClick={this.handleSubmit}>Book!</button>
            </div>
        );
    }
};

const mapStateToProps = state => {
    return {
        items: state.firestore.ordered.items
    }
}

const mapDispatchToProps = dispatch => {
    return {
        book: date => dispatch(book(date))
    }
}

export default compose(
    connect(mapStateToProps, mapDispatchToProps),
    firestoreConnect([
        { collection: 'items' }
    ]) 
)(BookItem);

为什么它在第一个组件中起作用，而不在第二个组件中起作用？

编辑：我的根减少器看起来像这样

const rootReducer = combineReducers({
    item: itemReducer,
    auth: authReducer,
    map: mapReducer,
    search: searchReducer,
    book: bookReducer,
    firestore: firestoreReducer,
    firebase: firebaseReducer
});

为什么mapStateToProps在不同的组件中显示不同的结果？

0 个答案: