reactjs - React 中的缓存

Question

在我的 react 应用程序中，我有一个输入元素。 应该记住搜索查询，这意味着如果用户之前搜索过“John”并且 API 为我提供了该查询的有效结果，那么下次当用户输入“Joh”时，应该会为用户提供先前记住的值的建议(在本例中将建议“John”)。

我是 React 新手，第一次尝试缓存。我读了几篇文章，但无法实现所需的功能。

Answer 1

您没有说明您正在使用哪个 API 或哪个堆栈；解决方案会有所不同，具体取决于您使用的是 XHR 请求还是 GraphQL 请求。

对于某个后端 API 的异步 XHR 请求，我会执行如下示例所示的操作。

查询 API 中的搜索词

_queryUserXHR = (searchTxt) => {
  jQuery.ajax({
    type: "GET",
    url: url,
    data: searchTxt,
    success: (data) => {
      this.setState({previousQueries: this.state.previousQueries.concat([searchTxt])
    }
  });
}

每当您想要针对 API 进行检查时，您都可以运行此函数。如果 API 可以找到您查询的搜索字符串，则将该数据插入本地 state 数组变量(在我的示例中为 previousQueries)。

如果您的 View 未知(例如数据库 ID)，您可以返回要从数据库插入的数据。上面我只是插入了 searchTxt ，这是我们根据用户在输入字段中键入的内容发送到函数的内容。在这里，选择权在您手中。

获取有关之前搜索过的字词的建议

我首先添加一个在 onKeyPress 事件上运行函数的输入字段:

<input type="text" onKeyPress={this._getSuggestions} />

那么该函数将类似于:

_getSuggestions = (e) => {
  let inputValue = e.target.value;
  let {previousQueries} = this.state;
  let results = [];
  previousQueries.forEach((q) => {
    if (q.toString().indexOf(inputValue)>-1) {
      result.push(a);
    }
  }
  this.setState({suggestions: results});
}

然后您可以在某处输出 this.state.suggestions 并在那里添加行为。也许是一些键盘导航之类的。有许多不同的方法来实现结果的显示方式以及您如何选择一种方法。

^{注意:我尚未测试上面的代码}