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-thunk）

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 prop，但不要调用它。您还需要定义要用作其输入的值。有两种主要方法可以做到这一点;

咖喱;

getSelectConfig(id) => () => this.props.selectConfig(id)

...

onClick={this.getSelectConfig(item.id)}

结合

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

Redux-thunk：动作创建者自动调用

1 个答案: