setState не .slicing () в массив состояния, как я собираюсь - PullRequest
Новая
       5

setState не .slicing () в массив состояния, как я собираюсь

0 голосов
/ 23 октября 2019

Справочная информация:

Я разрабатываю конструктор маршрутов, который состоит из строк или экземпляров компонентов с именем EventContainers, которые представляют деятельность в определенный день пользователя.

Класс, показанный ниже, имеет массив в state.events, который принимает EventContainers из setState в функции pushNewEventContainerToState.

Следует отметить, что каждый EventContainer содержит кнопку, предназначенную для того, чтобы дать пользователю возможность onClick дополнительной строкой / EventContainer путем вызова pushNewEventContainerToState.

Эта же кнопка также указана в качестве собственного экземпляра компонента с именем NewEventButton и отображается перед любым EventContainers.

Любой EventContainer, для которого setStated установлено значение state.events, должен помещаться в индекс сразу после EventContainer, который вызывает setState, а не в начале или в конце.

Метод

Я использую .slice () в setState с намерением сделать именно это => помещая новейший EventContainer в индекс сразу после EventContainer, которыйназывается settate.

Проблема

Однако есть три проблемы, которые я вижу:

a) Только самая первая кнопка, NewEventButton, фактически вызовет setState. Кнопки на новом EventContainer ничего не будут делать.

b) Кажется, что EventContainers, которые проходят через setState, передаются в state.events, а не .sliced ​​(), но мне это не нужноих в конце массива.

в) Когда я проверяю Chrome devtools, я вижу, что любой EventContainer, для которого установлено состояние state.events, не определен.

Что я имеюпробовал

Я пытался поместить два разных вида реквизита непосредственно в EventContainer, который находится внутри pushNewEventContainerToState: 

1. The first prop I tried didn't do anything -> onClick={() => this.pushNewEventContainerToState(index)

2. The second prop I tried was the same as the first except, instead of onClick, I named it pushNewEventContainerToState. This got the button on new EventContainers working but the EventContainers seemed to again be .pushed() instead of .sliced the way I need them to be. Chrome devtools will then show this is defined but I don't see a bound like I do for the first NewEventButton.

Большое спасибо за просмотр. 

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

    this.state = {
      events: [],

    };

    this.pushNewEventContainerToState = this.pushNewEventContainerToState.bind(this);
  }



      pushNewEventContainerToState(index) {
        let newEvent = < EventContainer / > ;

        this.setState(prevState => {
          const updatedEvents = [...prevState.events.slice(0, index), newEvent, ...prevState.events.slice(index + 1)];

            return {
              events: updatedEvents
            };
        })
      }

  render(){
    return (
        <>
          <div>
              <ul>

                  {
                    this.state.events === null
                    ? <EventContainer pushNewEventContainerToState={this.pushNewEventContainerToState} />
                    : <NewEventButton pushNewEventContainerToState={this.pushNewEventContainerToState} />
                  }


                  {this.state.events.map((item, index) => (
                    <li
                        key={item}
                        onClick={() => this.pushNewEventContainerToState(index)}
                    >{item}</li>
                  ))}

              </ul>

          </div>
        </>
    )
  }
}

1 Ответ

1 голос
/ 23 октября 2019

Попробуйте сначала исправить эту часть вашей функции, похоже, она не работает должным образом: 

[...prevState.events.slice(0, index), newEvent, ...prevState.events.slice(index + 1)]

измените на: 

[...prevState.events.slice(0, index), newEvent, ...prevState.events.slice(index)]

.slice () в секундуАргумент заставляет его остановиться на этом, но не включает индекс элемента. Так что если у вас есть [1, 2, 3] .slice (0,1) в примере, вы получите только первый элемент -> [1]. Надеюсь, что это решит проблему.

...