道具 `store.subscribe` 被标记为必需

Question

我正在尝试将一个组件连接到 redux 商店，但正在接收：

Warning: Failed prop type: The prop 'store.subscribe' is marked as required inConnect(StoreLocation), but its value is 'undefined'.

我在这个项目中使用 redux 已经有一段时间没有问题了，但是这个组件由于某种原因出错了，我现在不知道为什么:(

商店在DeliverySection.js 内填充了一系列商店（实体店地址、电话号码等用于送货选择）。

然后每个StoreLocation.js 组件将允许用户查看它的信息、选择它等。它现在只是简单的，因为即使在这个基本点上我也看到了错误。如果我用export default StoreLocation 切换export default connect()(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 作为道具名称。您正在覆盖通过 HOC 的 prop react-redux。由于您传递给 store 的对象没有 subscribe 方法，因此您会收到此错误。

如果你改变你的道具的名字，你会恢复良好的状态。

Answer 2

在快速谷歌后，我发现了这篇文章here。 该问题与您的问题相似，是基于商店的导出方式。看看那个，看看是否能让你朝着正确的方向前进。如果没有看到您的商店导出代码，我无法发表评论。

根据个人喜好，我会使用“商店”以外的其他内容作为商店地图中每个实例的变量。由于您使用的是 Redux，因此无论您指的是 Redux 存储还是存储对象的实例，都会在语义上产生混淆。

我认为让 StoreLocation 处理交付设置很好。我非常喜欢将事物分解成更小的组件。

最后，只是因为我碰巧注意到了，你在 DeliverySection 中有一个拼写错误。第 8 行读取 //Stote。我猜你的意思是//Store。

Answer 3

提前道歉，因为我认为这应该放在评论部分，但是您粘贴的代码看起来还不错。您说断开 StoreLocation 组件可以解决问题。您是否有理由要连接该组件？您没有将任何状态映射到道具或在该组件中使用调度。

否则，请确保您使用所需的 reducer 正确初始化存储，并检查您使用的模块是否正确导入 - 尤其是您传递给连接函数 (getAllStores) 的模块。