在 React 中哪里使用 componentDidUpdate

Question

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

我已成功获取数据并显示在网格上。此外，搜索工作正常。但是我很困惑是否应该将搜索方法放在 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;

Answer 1

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

注意： ComponentDidUpdate 如果处理不当，即你无条件地更新其中的任何状态将导致 Infinite Loop

Answer 2

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

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

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

Answer 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>

在 React 中哪里使用 componentDidUpdate

Where to use componentDidUpdate in React

reactjs

react-component