Javascript 将“store.subscribe”属性标记为必需

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

警告：失败的道具类型：道具“store.subscribe”在

Connect（StoreLocation）

中标记为必需，但其值为“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)

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

import React，{Component}来自“React”
从“react redux”导入{connect}
//组成部分
从“../../utils/Loader”导入加载程序
从“./StoreLocation”导入StoreLocation
//斯托特
从“../../store/actions/storeLocation”导入{getAllStores}
从“../../../shared/vars”导入{REACT\u APP\u SITE\u KEY}
//CSS
导入“../../css/delivery.css”
类DeliverySection扩展组件{
componentDidMount（）{
this.props.getAllStores（REACT\u APP\u SITE\u KEY）；
}
render（）{
const{stores，isLoading}=this.props
返回(
选择附近的商店：
寄往一个地址
{孤岛加载(
) : (
！isLoading&&！！商店(
stores.map（（store，i）=>）
) : (
没有要送货的门店。

发送到一个地址！
)
)}
)
}
}
常量mapStateToProps=（状态）=>{
返回{
门店：state.storeLocation.stores，
isLoading:state.storeLocation.isLoading
}
}
导出默认连接（MapStateTops，{getAllStores}）（DeliverySection）

StoreLocation.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)

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

import React，{Component}来自“React”
从“react redux”导入{connect}
从“../../../store/actions/checkout”导入{setDelivery}
类StoreLocation扩展组件{
render（）{
const{store}=this.props
返回(
{store.title}
{store.address}
{store.formatted_位置&&
{store.formatted_location}
}
this.props.setDelivery（store）}>Ship to this store
见地图
{store.description}
{store.phone&&
{store.phone}
}
)
}
}
导出默认连接（null，{setDelivery}）（StoreLocation）
//导出默认存储位置

在快速搜索之后，我发现了这篇文章。 这个问题与你的问题类似，是基于商店的导出方式。看看这个问题，看看你是否朝着正确的方向发展。如果没有看到你的商店导出代码，我无法发表评论

根据个人偏好，我会使用除“store”之外的其他变量作为商店地图中每个实例的变量。因为您使用的是Redux，所以在语义上可能会混淆您是指Redux商店还是商店对象的实例

我认为让StoreLocation处理交付设置是很好的。我非常喜欢把东西分解成更小的组件

---

最后，就因为我碰巧注意到它，您在DeliverySection中有一个拼写错误。第8行的内容是

//Stote

。我猜您的意思是

//Store

提前道歉，因为我认为这应该放在注释部分下，但是您粘贴的代码看起来没问题。您说断开StoreLocation组件可以解决这个问题你想连接那个组件有什么原因吗？你没有将任何状态映射到props或者在那个组件中使用dispatch

---

否则，请确保使用所需的还原器正确初始化存储，并检查正在使用的模块是否正确导入，尤其是传递给connect函数（getAllStores）的模块.

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

---

如果您更改道具的名称，您的状态将恢复正常。

您缺少connect函数的参数，该函数接收状态并返回一个对象以作为道具传递给组件，通常会调用该函数mapStateToProps@Jalissa连接功能的参数是可选的。请检查我的错误，您是对的@palsrealm！谢谢！如果您只想将

dispatch

注入您的道具中，您可以调用

connect（）

，而无需参数。请检查@palsrealm，对不起，我在文档中误读了这一点，刚刚更新了我的评论。我