javascript - 了解 React.js 中的搜索过滤如何工作

Question

我是新来的 react 。我昨天开始学习，我正在尝试使用 pokemon API ( https://pokeapi.co/ ) 制作一个简单的 Web 应用程序，用户可以按名称搜索 pokemon 并按类型过滤。

对于搜索，我的想法是当用户在搜索框中输入查询时过滤神奇宝贝数据数组。我不明白的是，react 的生命周期。

在搜索框中输入内容后，我似乎必须立即更新过滤数组。这与 React 组件的生命周期有什么关系？换句话说，这个更新必须在生命周期的哪一部分？

我并不是要代码，但我想了解一下如何开始这个编程。

谢谢

Answer 1

要理解的最重要的事情是组件的状态生命周期 - 一旦您真正了解其工作原理，您就会发现它非常适合您想要实现的目标。每次修改组件状态时(例如，每次在正在搜索的神奇宝贝的输入字段中输入一个字符时)，React 都会调用该组件的 render(){} 方法。新修改的状态对象将可用于渲染函数内部的任何函数(在您的情况下类似于过滤器函数)或方法等，并且该概念将允许您根据与这些状态对象一起操作的任何函数返回 JSX 组件作为参数。

所以基本上我想象的是这样的:1.如果state中没有过滤器的字符串，则加载所有pokemon，否则使用字符串过滤pokemon列表，并返回过滤后的列表。2. 当在输入字段中输入内容时，用该值更新状态中的过滤器。3. 调用render方法，如此循环。