拼接状态后Reactjs不更新dom类

Question

您好，我是 React 新手，对更改 classes 和 onClick 动画有疑问。

我试图仅使用 css classes 上下移动，我添加或删除到我的 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" class 时 dom 不会重新加载。

提前感谢您的所有帮助，如果我没有展示您需要的内容，请写信。

Answer 1

你是对的，你不应该像那样直接改变状态，而是使用 setState() 方法。做 this.state.updown.push("position-top"); 会改变它。假设您想从数组中删除最后的内容，您可以这样做：

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

这会导致重新渲染。将状态视为不可变的。

拼接状态后Reactjs不更新dom类

Reactjs not updating dom classes after splicing state

reactjs

react-state