Reactjs 在React中使用componentDidUpdate的位置

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

我已经成功地获取了数据并显示在网格上。此外，搜索也很有效。但是我不知道是否应该将搜索方法放在componentDidUpdate生命周期钩子中。如果是，怎么做

以下是我的代码：

 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;

类应用程序扩展组件
{
建造师（道具）
{
超级（道具）；
此.state={
电影：[]，
filteredMovies:[]
}
}
componentDidMount（）
{
axios.get（）https://api.themoviedb.org/3/movie/top_rated?api_key={0}&language=en-US&page=1'）
。然后（响应=>{
这是我的国家({
电影：回应、数据、结果、，
filteredMovies:response.data.results
});
});
}
componentDidUpdate（）
{
???
}
searchBy=（columnSearch，evt）=>
{
console.log（columnSearch）；
让电影=this.state.movies；
如果（evt！==未定义和&evt.target.value！==未定义和&evt.target.value.length>0）{
movie=movie.filter（函数（i）{
console.log（columnSearch）；
返回i[columnSearch].toString（）.match（evt.target.value）；
});
}
这是我的国家({
过滤视频：电影
});
}
render（）{
const movieRows=（this.state.filteredMovies===[]| | this.state.filteredMovies===未定义）？[]：
this.state.filteredMovies.map（（rowData，index）=>）；
if（movieRows！=[]和&movieRows！==未定义和&movieRows！==空）
返回(
电影Id
this.searchBy（'id'，evt）}/>
Title this.searchBy（'Title'，evt）}/>
{/*this.sortBy（'overview'）}>overview*/}
Popularitythis.searchBy（'popularity'，evt）}/>
评级此。searchBy（'vote_average'，evt）}/>
{movieRows}
) ;
};
}
导出默认应用程序；
康斯特电影=（道具）=>(
{props.id}
{props.title}
{/*{props.overview}*/}
{props.popularity}
{props.vote_average}
);
导出默认电影；

componentdiddupdate

在组件内部发生任何状态更新时调用，因此您可以将搜索方法放入

componentdiddupdate

或任何方法中，但通常我们在

componentdiddupdate

内部执行操作，这些操作确实需要一些状态更改，也不需要用户输入。对于任何搜索，您必须需要用户输入，因此我不建议您将搜索方法放在

componentdiddupdate

中，而是将该方法放在

onChange

事件处理程序中

---

注意：

componentdiddupdate

如果处理不正确，也就是说，如果您想在componentdiddupdate方法中调用api，那么在没有任何条件的情况下更新此方法中的任何状态将导致

无限循环。你应该使用if条件。因为在更新dom时，将触发此方法

应该是这样的。我不知道你的逻辑。请根据您的用例更改它

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

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

您想要的是在
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>


在文本字段中写入

下面是你写的东西


document.getElementById（'mySelect'）。addEventListener（'keyup'，search）
函数搜索（事件）{
console.log（event.target.value）
document.getElementById（'demo'）.innerText=event.target.value
}
组件更新后是否要执行某些操作？然后使用
componentdiddupdate
它还将为您提供以前的状态和道具作为参数。我将参加这项变革活动。谢谢你。