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

Question

我是新手做出反应。我昨天开始学习，我正在尝试使用口袋妖怪API（https://pokeapi.co/）创建一个简单的Web应用程序，用户可以按名称搜索小宠物并按类型过滤。

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

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

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

由于

Answer 1

最重要的是要了解组件的状态生命周期 - 一旦你对它的工作方式有了很好的理解，那么你会发现它非常适合你想要实现的目标。 每次修改组件状态时（例如，每次将字符输入到正在搜索的小宠物的输入字段中），React将调用该组件的render（）{}方法。新修改的状态对象将可用于渲染函数内部的任何函数（在您的情况下类似于过滤器函数）或方法等，并且该概念将允许您基于与这些状态对象一起操作的任何函数返回JSX组件作为参数。

基本上我想象的是这样的： 1.如果状态中没有过滤器的字符串，请加载所有的口袋妖怪，否则用字符串过滤口袋妖怪列表，然后返回过滤后的列表。 2.在输入字段中键入内容时，请更新具有该值的状态的过滤器。 3.调用render方法，循环将重复。