在 React 中“重新渲染”组件的最佳实践是什么？

Question

我有一个映射的项目数组，当我删除一个项目时，它会在数据库中删除，如果我手动刷新页面，它就消失了。但是，一旦我单击删除按钮，我想“重新渲染”项目列表。据我所知，我是否需要将状态更改为“重新渲染”，所以我尝试设置一个布尔值，但它不会“重新渲染”。任何有关实现此结果的最佳实践的建议都会有所帮助。

class Profile extends Component {
  state = {
    username: '',
    movies: [],
    reRender: false    <---- by changing this state, I want a re-render of the component
  }

  getUserMovies = () => {
    const token = localStorage.usertoken;
    const decoded = jwt_decode(token);

    axios.post('/getusermovies', {
      user: decoded.username
    }).then(response => {
      this.setState({
        username: decoded.username,
        // movieName: response.data.moviename
        movies: response.data
      })
      console.log(response.data)
    }).catch(error => {
      console.log(error + "err in the front end getusermovies function")
    })
  }

  componentDidMount() {
    this.getUserMovies();
  }

  deleteMovie = (itemId) => {
    axios.post('/delete', {
      movie: itemId
    }).catch(err => {
      console.log(err + "in the deleteMovie function in front end" + itemId)
    })

    this.setState(prevState => ({
      reRender: !prevState.reRender  <------ This is where I am calling a state.
    }))
  }

  render() {
    let movies = this.state.movies;
    return (
      <div className="container">
        <h1>{this.state.username}'s Movies: </h1>
        <div className="row">
          {movies.map(item =>
            <div className="profile-movies-box" >
              <img src={item.movie} alt='no image' className="movies-box-img" />
              <h4>{item.moviename}</h4>

              <button className="movie-buttons">
                <Link to={{
                  pathname: `/movie?movieName=${item.moviename}`,
                  state: { link: item.moviename }
                }}>View Movie</Link>
              </button>

              <button 
                className="movie-btn"
                value={item.moviename}
                onClick={() => { this.deleteMovie(item.moviename) }}
              >Delete Movie</button>
            </div>
          )}
        </div>
      </div>
    );
  }
}

export default Profile;

Answer 1

您需要更新电影数组，删除已删除的项目

deleteMovie = (itemId) => {

    axios.post('/delete', {
        movie: itemId
    })
    .then(res => {
      this.setState(prevState => ({
         movies: prevState.movies.filter(m => m.id !== itemId)
      }));
    })
   .catch(err => {
        console.log(err + "in the delteMovie function in front end" + itemId)
    })
 }

我会推荐使用异步等待

deleteMovie = async (itemId) => {
  try {
   await axios.post('/delete', {
      movie: itemId
   });
   this.setState(prevState => ({
       movies: prevState.movies.filter(m => m.id !== itemId)
    }));
  } catch (err) {
    console.log(err + "in the delteMovie function in front end" + itemId)
  }
 }