終極版-形實轉換：動作創建器自動調用

Question

我有減速機：

import sliderInitialConfig from '../fixures'; 

export default (sliderConfig = sliderInitialConfig, action) => { 
    const {type, payload} = action; 
    switch(type) { 
     case "SELECT_CONFIG": 
      console.log(sliderConfig); 
      return sliderConfig.filter(item => item.id === payload); 

     default: 
      return sliderConfig; 
    } 
} 

我有作用的創建者（使用終極版-形實轉換）

export const selectConfig = (id) => dispatch => { 
    dispatch({type: "SELECT_CONFIG", payload: id}) 
}; 

我有JSX碼的一部分，其中，我使用AC。

{ 
    sliderElements.map(item => 
     <li 
     key={item.id} 
     className="btn" 
     onClick={this.props.selectConfig(item.id)} 
     > 
     {item.device} 
     </li> 
) 
} 

所以，當我在瀏覽器中加載的項目，這個AC自動調用和，而不是元素的數組，我收到空數組，如下：

{sliderElements: Array(4), fetchUser: ƒ, handleToken: ƒ, submitSurvey: ƒ, scrollMovement: ƒ, …} 
sliderElements.js:7 (4) [{…}, {…}, {…}, {…}]0: {id: 1, device: "Apple iMac", image: "/static/media/mac_monitor.931c27aa.svg"}1: {id: 2, device: "Apple Macbook Pro", image: "/static/media/mackbook_pro.c9315d2b.png"}2: {id: 3, device: "MSI GP72VR 7RFX", image: "/static/media/iphone_X.bebbd7bc.jpg"}3: {id: 4, device: "Iphone X", image: "/static/media/msi_laptop.8190feed.jpg"}length: 4__proto__: Array(0) 
sliderElements.js:7 [{…}]0: {id: 1, device: "Apple iMac", image: "/static/media/mac_monitor.931c27aa.svg"}length: 1__proto__: Array(0) 
sliderElements.js:7 [] 
sliderElements.js:7 [] 
BlockFive.js:14 {sliderElements: Array(0), fetchUser: ƒ, handleToken: ƒ, submitSurvey: ƒ, scrollMovement: ƒ, …} 

Answer 1

 <li 
     key={item.id} 
     className="btn" 
     onClick={this.props.selectConfig(item.id)} 
     > 
     {item.device} 
     </li> 

這裏，你是，調用 selectConfig函數。你想通過這個函數來onClick道具，但是不能調用它。您還希望定義要用作輸入的值。有兩種主要方式可以做到這一點;

1. 咖喱;

   getSelectConfig(id) =>() => this.props.selectConfig(id) 
   
   ... 
   
   onClick={this.getSelectConfig(item.id)} 
   

2. 結合;

   onClick={this.selectConfig.bind(this, item.id)}