Question

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

Warning: Failed prop type: The prop 'store.subscribe' is marked as required in连接（StoreLocation）, 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

这是因为您使用商店作为您的道具名称。你正在覆盖prop react-redux通过HOC。因为，您为商店传递的对象没有订阅方法，所以会出现此错误。

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

Answer 2

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

否则，请确保您使用所需的reducer正确初始化商店，并检查您正在使用的模块是否正确导入 - 尤其是您传递给connect函数的模块（getAllStores）

Answer 3

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

在个人偏好笔记中，我会使用“store”以外的其他内容作为商店地图中每个实例的变量。由于您使用的是Redux，无论您是指Redux存储还是存储对象的实例，它都会在语义上造成混淆。

我认为您正好让StoreLocation处理交付设置。我非常喜欢把事情分解成更小的组件。

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

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

3 个答案: