перестроить пользовательский интерфейс по массиву в React

Question

Итак, у меня есть календарь, только с буднями, с понедельника по воскресенье. Я хочу реализовать что-то, что, когда вы нажимаете стрелку (влево или вправо), пользовательский интерфейс перестраивается, поэтому, в основном, у нас есть

< monday tuesday wednesday thursday friday saturday sunday >

если я нажму стрелку, указывающую влево, я хочу изменить интерфейс, чтобы он выглядел ->

< sunday monday tuesday wednesday thursday friday saturday >

в основном, начните с последнего индекса в массиве У меня есть следующее

<ul className="weekday">
  <li> <FontAwesomeIcon icon="arrow-left" /> </li>
    {this.state.weekDays.map(day => <li key={day}> {day} </li>)}
  <li onClick={this.handleIncrement}> <FontAwesomeIcon icon="arrow-right" /> </li>
</ul>

здесь я отображаю все дни недели в массиве из дней недели

weekDays: [ 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun' ]

у меня также есть currenyDay:0; в моем состоянии, под массивом и как вы можете видеть onClick на стрелке вправо, которая увеличивает текущий день, потому что на стрелке вправо мне нужно увеличить текущий день на 1, функция выглядит как

handleIncrement = () => {
  this.state.currentDay = this.state.currentDay +1;
}

однако, это ничего не делает, это не работает вообще, любые идеи почему?

-------------------------- полный код

class Calendar extends Component {
     state = { 
      weekDays: [ 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun' ],
      currentDay:0
    };

    handleIncrement = () => {
      this.state.currentDay = this.state.currentDay +1;
    }

    render() { 
        return (  
            <div className="calendar">
            <div className="col leftCol">
              <div className="content">
                <h1 className="date">My React.js Calendar</h1>
              </div>
            </div>
            <div className="col rightCol">
              <div className="content">
                {/* <div className="clearfix"></div> */}
                <ul className="weekday">
                  <li> <FontAwesomeIcon icon="arrow-left" /> </li>
                    {this.state.weekDays.map(day => <li key={day}> {day} </li>)}
                  <li onClick={this.handleIncrement}> <FontAwesomeIcon icon="arrow-right" /> </li>
                </ul>
                {/* <div className="clearfix"></div> */}
                {/* <div className="clearfix"></div> */}
              </div>
            </div>
            {/* <div className="clearfix"></div> */}
        </div>
        );
    }
}

export default Calendar;

Answer 1

Я не уверен, какова цель currentDay, но кажется, что он ничего не влияет на рендер.

Я бы реализовал это, изменив массив в состоянии. Основная идея заключается в том, что приращение или уменьшение вызова setState с функцией обновления. Используйте функцию обновления setState всякий раз, когда вы хотите создать новое состояние на основе предыдущего. Мы берем weekDays предыдущего состояния и создаем новый массив в нужном нам порядке.

class Weekdays extends React.Component {
  state = {
    weekDays: [ 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun' ]
  };
  
  moveLeft = () => this.setState(({ weekDays: [head, ...tail] }) => ({
    weekDays: [...tail, head]
  }));
  
  moveRight = () => this.setState(({ weekDays }) => ({
    weekDays: [...weekDays.slice(-1), ...weekDays.slice(0, -1)]
  }));
  
  render() {
    const { weekDays } = this.state;
    
    return (
      <ul className="weekday">
        <li onClick={this.moveLeft}>&lt;</li>
        
          {this.state.weekDays.map(day => <li key={day}> {day} </li>)}
        
        <li onClick={this.moveRight}>&gt;</li>
      </ul>    
    );
  }
}

ReactDOM.render(
  <Weekdays />,
  demo
);

.weekday {
  display: flex;
  list-style: none;
}

.weekday > li {
  margin: 0 0.5em;
}

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="demo"></div>