Reactjs не обновляет dom классы после сплайсинга

Question

Здравствуйте, я новичок, чтобы реагировать и есть вопрос с изменением классов и анимации onClick.

Я пытаюсь перемещаться вверх и вниз только с классами CSS, которые я добавляю или удаляю в массив, который находится в моем className.

app.js у меня есть это в состоянии

updown: ["containerMG"],

и вот как я отрисовываю свои компоненты в app.js

  render() {

    return (
      <div>
      <div className="movies-container">
        {this.state.filmovi.map((film, index) => {
          return <Film
                    naslov={film.naslov}
                    naslovnaSlika={film.naslovnaSlika}
                    key={film.id}
                    openFilm={() => this.injectFilm(index)}/>
      })}
      </div>
      <Gallery />
      <ContainerMG
        selectedFilm={this.state.selectedFilm}
        klasa={this.state.updown}
        zatvori={this.closePreview}/>
      </div>
    );
  }

мой компонент выглядит так

const ContainerMG = (props) => {
  return (
      <div className={props.klasa.join(' ')}>
      <img onClick={props.zatvori} src="xxx" alt="close" className="close-popup" />
        <p>{props.selectedFilm.naslovFilma}</p>
      </div>
  )
}

вот как div движется вверх

  injectFilm = (filmIndex) => {
    this.state.updown.push("position-top");
    const selectedFilm = this.state.filmovi.find((film, index) => index === filmIndex)
    this.setState((prevState) => ({
       selectedFilm
    }))
  }

вот как я пытался сдвинуть его вниз

  closePreview = () => {
    this.state.updown.splice(1);
  }

я почти уверен, что не должен менять состояние напрямую, а также, когда я изменяю его, чтобы удалить класс "position-top", который dom не перезагружает.

заранее спасибо за всю помощь, и если я не показал что-то, что вам нужно, пишите.

Answer 1

Вы правы, вы никогда не должны менять состояние напрямую, а использовать setState() метод. дела this.state.updown.push("position-top"); будет мутировать его. Допустим, вы хотите удалить все, что является последним из массива, вы можете сделать что-то вроде:

const {updown} = this.state;
updown.pop();
this.setState({updown: updown});

Что вызвало бы повторную визуализацию. Относитесь к государству как к неизменному.