javascript - prop `store.subscribe` 标记为必填

Question

我正在尝试将组件连接到 redux 商店，但收到:
Warning: Failed prop type: The prop 'store.subscribe' is marked as required in连接(商店位置), but its value is 'undefined'.
我已经在这个项目中使用 redux 一段时间了，没有问题，但是这个组件由于某种原因出错了，我现在不知道为什么:(

该商店在 DeliverySection.js 内填充了一系列商店(带有地址、电话号码等的实体店位置，用于运送选择) .

然后每个 StoreLocation.js组件将允许用户查看它的信息、选择它等。它现在是裸露的，因为即使在这个基本点上我也看到了错误。如果我切换 export default connect()(StoreLocation) export default StoreLocation 的声明它没有问题。

有任何想法吗？

DeliverySection.js

import React, { Component } from 'react'
import { connect } from 'react-redux'

// Components
import Loader from '../../utils/Loader'
import StoreLocation from './StoreLocation'

// Stote
import { getAllStores } from '../../../store/actions/storeLocation'
import { REACT_APP_SITE_KEY } from '../../../shared/vars'

// CSS
import '../../../css/delivery.css'

class DeliverySection extends Component {
    componentDidMount(){
        this.props.getAllStores(REACT_APP_SITE_KEY);
    }

    render() {
        const { stores, isLoading } = this.props

        return (
            <div>
                <div className="delivery-heading">
                    <h2>Choose a store near you:</h2>
                    <button className="btn btn--red btn--heading" name="ship-to-address">Ship To An Address</button>
                </div>

                <div>
                    {isLoading ? (
                        <Loader />
                    ) : (
                        !isLoading && !!stores ? (
                            stores.map((store, i) => <StoreLocation key={i} store={store} />)
                        ) : (
                            <div>
                                There are no store locations to deliver to.<br />
                                Ship to an address!
                            </div>
                        )
                    )}
                </div>
            </div>
        )
    }
}

const mapStateToProps = (state) => {
    return {
        stores: state.storeLocation.stores,
        isLoading: state.storeLocation.isLoading
    }
}

export default connect(mapStateToProps, { getAllStores })(DeliverySection)

StoreLocation.js

import React, { Component } from 'react'
import { connect } from 'react-redux'

import { setDelivery } from '../../../store/actions/checkout'

class StoreLocation extends Component {
    render() {
        const { store } = this.props

        return (
            <div className="store-location">
                <div className="store-row">
                    <div className="store-col"><div className="store-title">{store.title}</div></div>
                    <div className="store-col">
                        {store.address}
                        {store.formatted_location &&
                            <div>{store.formatted_location}</div>
                        }
                    </div>
                    <div className="store-col">
                        <button className="btn select-store" onClick={() => this.props.setDelivery(store)}>Ship to this store<span className="icon-checkmark"></span></button>
                    </div>
                </div>
                <div className="store-row">
                    <div className="store-col">
                        <div className="ajax-message" data-hbs-id="postal-{id}"></div>
                        <input type="hidden" id={`postal-${store.id}`} value={store.postal} />
                        <div className="see-map"><span className="icon-location"></span>See on map</div>
                    </div>
                    <div className="store-col">{store.description}</div>
                    <div className="store-col"></div>
                </div>
                {store.phone &&
                    <div className="store-row">
                        <div className="store-col"></div>
                        <div className="store-col">{store.phone}</div>
                        <div className="store-col"></div>
                    </div>
                }
            </div>
        )
    }
}

export default connect(null, { setDelivery })(StoreLocation)
// export default StoreLocation

Answer 1

这是因为您使用 store 作为 Prop 名称。您正在覆盖通过 HOC 传递的 prop react-redux。由于您传递给 store 的对象没有 subscribe 方法，因此您会收到此错误。

如果您更改 Prop 的名称，您将再次处于良好状态。