您将如何使用componentDidUpdate来更新某些内容而不必刷新页面？

Question

因此F显示电影收藏状态的＃个，W显示电影观看状态的＃个。

我做了一个按钮，将收藏的电影的数量清除为0，但是要更新它，我必须刷新页面。我将如何使用componentDidUpdate生命周期来更新它而不刷新页面？

你能解释一下这个过程吗？

Answer 1

我认为您应该将电影的数量作为一种状态，并且我认为componentDidUpdate并不是最好的方法，您只需要一个按钮onClick监听器即可。

在您的构造函数中。

constructor(props) {
  super(props);
  this.state = { movies: 0 }; // or movies: [] empty array
}

然后在您的按钮组件中。

<button
  onClick={() => {
    this.setState({ movies: 0 });
  }}
/>

Answer 2

如果要获取this.props中的值，那么在componentDidUpdate中可以做的一件事是

componentDidUpdate(prevProps) {
  if (this.props !== prevProps) {
    //update the state for movies favorited & movies watched.
  }
}

另一个解决方案是 初始化两个状态，然后在api调用响应的情况下在 componentDidMount 中设置setState。

如果这些道具来自道具，请使用 componentWillReceiveProps ，它将在nextProps中为您提供更新的道具。

componentWillReceiveProps = (nextProps) => {
  this.setState({m_fav : nextProps.fav, m_watch: nextProps.watch})
}