該道具`store.subscribe`被標記

Question

我試圖連接到了Redux存儲的成分，但我接收：

Warning: Failed prop type: The prop 'store.subscribe' is marked as required in連接（StoreLocation）, but its value is 'undefined'.

我已經使用終極版與這個項目有一段時間沒有問題，但這個組件正在出錯，出於某種原因，我不知道爲什麼在這一點:(

該商店填充商店的集合（磚和灰漿地點的地址，電話數字等用於航運選擇）在內0。

然後，每個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

這是因爲您使用商店作爲您的道具名稱。你正在覆蓋通過HOC的prop react-redux。因爲您傳遞給商店的對象沒有訂閱方法，所以會出現此錯誤。

如果你改變你的道具名稱，你將會恢復良好狀態。

Answer 2

做一個快速谷歌後，我遇到了這個職位here。 與您的問題類似，該問題基於商店的出口方式。看看這個，看看你是否能朝着正確的方向前進。如果沒有看到您的商店導出代碼，我無法評論。

在個人偏好說明中，我會在商店地圖中使用除「store」之外的其他變量作爲每個實例的變量。由於您使用的是Redux，因此無論您是指Redux商店還是商店對象的實例，都可能會在語義上產生混淆。

我認爲您有StoreLocation處理交付設置是很好的。我非常喜歡把事情分解成更小的組件。

最後，僅僅因爲我碰巧注意到它，您在DeliverySection中出現拼寫錯誤。第8行顯示//Stote。我猜你的意思是//Store。

Answer 3

提前道歉，我認爲這應該在評論部分下，但你粘貼的代碼看起來沒問題。你說斷開StoreLocation組件修復了一些事情。是否有你想連接該組件的原因？你沒有將任何狀態映射到道具或在該組件中使用派遣。否則，請確保您使用所需的縮減器正確初始化商店，並檢查您正在使用的模塊是否已正確導入 - 尤其是您傳遞給連接函數（getAllStores）的模塊。