在 React 中缓存

Question

在我的反应应用程序中，我有一个输入元素。搜索查询应该被记住，这意味着如果用户之前搜索过 'John'并且 API 为我提供了该查询的有效结果，那么下次当用户输入 'Joh' 时，应该有给用户的建议使用先前记忆的值（在这种情况下，将建议使用“John”）。

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

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在我的示例中）。

如果您的视图存在未知数（例如数据库 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某处输出并在那里添加行为。也许一些键盘导航或其他东西。有许多不同的方法可以实现结果的显示方式以及如何选择一种方法。

^{注意：我没有测试上面的代码}