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

Question

每次我点击按钮时，参数始终是 {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)),
})

Answer 1

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

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

引用codesandbox: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)),
})