Node.js “最佳实践是什么？”；“重新渲染”；反应中的一种成分？

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

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;

类配置文件扩展组件{
状态={
用户名：“”，
电影：[]，
重播：错{
const token=localStorage.usertoken；
const decoded=jwt_decode（令牌）；
axios.post（“/getusermovies”{
用户：decoded.username
})。然后（响应=>{
这是我的国家({
用户名：decoded.username，
//movieName:response.data.movieName
电影：response.data
})
console.log（response.data）
}).catch（错误=>{
log（错误+“前端getusermovies函数中的错误”）
})
}
componentDidMount（）{
这是.getUserMovies（）；
}
deleteMovie=（itemId）=>{
axios.post（“/delete”{
电影：itemId
}).catch（错误=>{
console.log（前端的deleteMovie函数中的err+“+itemId）
})
this.setState（prevState=>({
reRender:！prevState.reRender您需要更新电影数组，删除已删除的项目


deleteMovie=（itemId）=>{
axios.post（“/delete”{
电影：itemId
})
。然后（res=>{
this.setState（prevState=>({
movies:prevState.movies.filter（m=>m.id！==itemId）
}));
})
.catch（错误=>{
console.log（前端delteMovie函数中的err+“+itemId）
})
}
您需要更新电影阵列，删除已删除的项目


deleteMovie=（itemId）=>{
axios.post（“/delete”{
电影：itemId
})
。然后（res=>{
this.setState（prevState=>({
movies:prevState.movies.filter（m=>m.id！==itemId）
}));
})
.catch（错误=>{
console.log（前端delteMovie函数中的err+“+itemId）
})
}
重新渲染不需要单独的状态，只需在单击“删除”时过滤掉电影，并使用要删除的项调用“删除”API即可。我找到了答案。这正是我所做的。谢谢，重新渲染不需要单独的状态，只需在单击“删除”时过滤掉电影，并使用要删除的项调用“删除”API即可e、 我明白了。这正是我所做的。非常感谢！我需要过滤原始数组。非常有意义！哈哈！非常感谢！我需要过滤原始数组。非常有意义