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

Question

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

对于搜索，我的想法是在用户在搜索框中输入查询时过滤口袋妖怪数据数组。我不明白的是，反应的生命周期。

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

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

谢谢

Answer 1

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

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