在 React 中哪里使用 componentDidUpdate [重复]答案

【问题标题】：Where to use componentDidUpdate in React [duplicate]在 React 中哪里使用 componentDidUpdate [重复]
【发布时间】：2020-12-31 07:42:12
【问题描述】：

我是开发领域的新手。我正在尝试制作一个我们获取电影的应用程序。我们可以搜索和排序。我现在不想使用任何插件。

我已成功获取数据并显示在网格上。此外，搜索运行良好。但是我很困惑是否将搜索方法放在 componentDidUpdate React 生命周期钩子中。如果是应该怎么办？

以下是我的代码：

 class App extends Component
{
  constructor(props) 
  {
    super(props);
    this.state = {
    movies: [],
    filteredMovies: []
    }
  }

  componentDidMount()
  {
    axios.get('https://api.themoviedb.org/3/movie/top_rated?api_key={0}&language=en-US&page=1')
    .then(response => {
      this.setState({
        movies : response.data.results,
        filteredMovies : response.data.results
      });
    });
  }

  componentDidUpdate()
  {
    ???
  }

 searchBy = (columnSearch, evt) =>
  {
    console.log(columnSearch);
   let movie = this.state.movies;
   if (evt!==undefined && evt.target.value !== undefined && evt.target.value.length > 0) {
    movie = movie.filter(function(i) {
      console.log(columnSearch);
      return i[columnSearch].toString().match( evt.target.value );
    });
  }
  this.setState({
    filteredMovies: movie
  });
  }

  render(){
    const movieRows =( this.state.filteredMovies ===[] || this.state.filteredMovies === undefined)?[]:
    this.state.filteredMovies.map( (rowData, index) => <Movie key ={index} {...rowData} />);

         if(movieRows !== [] && movieRows !== undefined && movieRows !== null)
            return (
              <div className="table">
                <div className="header row">
                  <div className="headercenter">Movie Id
                  <input type="text"  onChange={(evt)=>this.searchBy('id',evt)}/>
                  </div>
                  <div className="headercenter"> Title <input type="text" onChange={(evt)=>this.searchBy('title',evt)}/></div>
                  {/* <div className="" onClick={() => this.sortBy('overview')}>OverView</div> */}
                  <div className="headercenter" >Popularity<input type="text" onChange={(evt)=>this.searchBy('popularity',evt)}/></div>
                  <div className="headercenter" >Rating<input type="text"  onChange={(evt)=>this.searchBy('vote_average',evt)}/></div>
                </div>
                <div className="body">
                  {movieRows}
                </div>
              </div>
            ) ;


     
  };
}
 


export default App;

    const movie = (props) => (
    <div className="row">
      <div>{props.id}</div>
      <div>{props.title}</div>
      {/* <div>{props.overview}</div> */}
      <div>{props.popularity}</div>    
      <div>{props.vote_average}</div>    
    </div>
  );

export default movie;

【问题讨论】：

你想在你的组件更新后做点什么吗？然后使用componentDidUpdate 它还会给你以前的状态和道具作为参数。

标签： reactjs react-component

【解决方案1】：

ComponentDidUpdate 在组件内发生任何状态更新时调用，因此您可以将搜索方法放入 ComponentDidUpdate 或任何方法中，但通常我们在 ComponentDidUpdate 内执行操作，这确实需要一些状态更改，也不需要用户输入。对于任何搜索，您都必须要求用户输入，因此我不建议您将搜索方法放在 ComponentDidUpdate 中，而是将该方法放在 onChange 事件处理程序中。

注意：ComponentDidUpdate如果没有正确处理，即你在没有任何条件的情况下更新其中的任何状态将导致Infinite Loop

【讨论】：

【解决方案2】：

如果你想在 componentDidUpdate 方法中调用你的 api。你应该使用 if 条件。因为当你的 dom 更新时，这个方法会触发。

它应该看起来像这样。我不知道你的逻辑。请根据您的用例进行更改。

componentDidUpdate(prevProps, prevState){
 if(prevProps.movies.lenght != prevState.movies.lenght){
   // call api
 }
}

【讨论】：

【解决方案3】：

您不需要将搜索功能放在componentDidUpdate 中，因为input 字段更改时会自动调用它。 componentDidUpdate 函数将在组件重新渲染时调用（例如在状态更改后）。

您想要的是在input 字段中的输入发生更改时调用搜索功能，为此我将添加keyup 事件，如下所示：

<!DOCTYPE html>
<html>
<body>

<p>Write in the text field</p>

<input type="text" id="mySelect" />
<p>Down here will show what you write</p>
<p id="demo"></p>

<script>
document.getElementById('mySelect').addEventListener('keyup', search)
function search(event) {      
  console.log(event.target.value)
  document.getElementById('demo').innerText = event.target.value
}
</script>

</body>
</html>

【讨论】：

谢谢，这解释得很好。我将参加更改活动。不过谢谢。