时间戳

首页 > 解决方案 > 如何使用 React 和 Redux 保持我的可迭代值循环？

javascript - 如何使用 React 和 Redux 保持我的可迭代值循环？

问题描述

每次单击按钮时，参数始终是 {i} 的最后一个值（在本例中为 0），我需要将普通值传递给 Redux 操作。

当我在我的 DIV 工作中打印时。

class MYCLASS extends React.Component {
    constructor(props){
        super(props);
    }

    render() {
        var level = []; 
        for (var i = 10; i > 0; i--) {
            level.push(
                <div>
                    <div>{i}</div>
                    <button className='up' onClick={()=>this.props.callUp({i})}>HEREEE!!</button>
                    <button className='down' onClick={()=>this.props.callDown({i})}>HEREEE!!</button>
                </div>
            );
        }
        return level
    }

}
const mapDispatchToProps = (dispatch) => ({
    callUp: (i) => dispatch(callUp(i)),
    callDown: (i) => dispatch(callDown(i)),
})

标签： javascriptreactjsredux

解决方案

当您遍历循环时，您可以将 的值存储i到变量中。每次遍历循环时，都会创建该变量的新实例。然后你可以将该变量传递给onClick处理程序。它的当前值将被使用并存储在数组的内存中。

如果你不这样做，它只会使用最终值i

请参阅代码沙盒以供参考：https ://codesandbox.io/s/fancy-waterfall-kw0kb

import React from "react";

class Test extends React.Component {
  renderButtons = () => {
    var level = [];
    for (var i = 10; i > 0; i--) {
      const currentLevel = i;
      level.push(
        <div>
          <div>{currentLevel}</div>
          <button className="up" onClick={() => this.props.callUp(currentLevel) }>
            HEREEE!!
          </button>
          <button className="down" onClick={() => this.props.callDown(currentLevel) }>
            HEREEE!!
          </button>
        </div>
      );
    }
    return level;
  };

  render() {
    return <div>{this.renderButtons()}</div>;
  }
}

export default Test;

const mapDispatchToProps = (dispatch) => ({
  callUp: (i) => dispatch(callUp(i)),
  callDown: (i) => dispatch(callDown(i)),
})

推荐阅读