Reduxの-サンク：アクションの作成者は、自動的に

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; 
    } 
} 

私が持っているアクションの作成者（Reduxの-サンクを使用して）

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

が、私は私がどこ、JSXコードの一部を持っていますACを使用します。私は、ブラウザでプロジェクトを読み込むときに、このACが自動的に呼び出され、代わりに要素の配列の

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

は、私はここでは、空の配列を受け取っ：

{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 propに渡しますが、呼び出すことはありません。また、入力として使用する値を定義する必要があります。これを行うには主に2つの方法があります。

1. カレー;

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

2. バインディング;

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