Как я могу держать свое повторяемое значение в цикле с 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

См. Коды и поля для справки: 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)),
})