React-tags: 更新建议道具在下一次输入之前不会更新选项列表(v6)

创建于 2020-05-11  ·  10评论  ·  资料来源: i-like-robots/react-tags

选项列表在 onInput 自定义处理程序https://github.com/i-like-robots/react-tags/blob/6.0/lib/ReactTags.js#L130之后直接更新
但是,当我在 onInput 处理程序中查询服务器时,需要一些时间。
因此,选项列表始终包含上次调用的建议列表,而不是最新调用的建议列表。

最有用的评论

我在这上面花了几分钟,我想我想出了一个合适的解决方案,下面的动画显示了异步更新的建议道具,并且选项列表在没有任何其他输入的情况下得到更新:

update

更改非常简单,因此我将进行更多测试并提出 PR。

所有10条评论

@yrik ,数据获取不是由组件提供的,而是由您自己实现的。 虽然我无法调试单个实现,但我很乐意提供一些建议。

继 #205 中的示例之后,我建议获取比您需要显示的更多的建议。 例如,如果您当前显示 6 条建议,则尝试从服务器获取 12 条或 15 条建议。 这样suggestionsFilter应该仍然有一些相关的数据可以使用,直到收到新的数据。

谢谢你回来!
这是一个有点不同的问题。
想象一下,我有一个“啤酒”这个词的自动完成功能

  1. 建议列表为空( []
  2. 用户输入“ be ” --> 服务器返回 [bee, beard, beetroot, beer] (我们什么都不显示,因为在 getOptions 调用后服务器返回数据时选项列表没有更新)
  3. 用户输入“ bee ” --> 服务器返回[bee, beetroot, beer] 我们显示[bee, beard, beetroot, beer],我们显示以前更新的数据,不是新鲜的
  4. 用户输入“ beer ” --> 服务器返回[beer],我们显示[bee, beetroot, beer],我们显示以前更新的数据,不是新鲜的

如果onInput将是async它将起作用。 或者,如果有一种方法可以从自定义onInput调用const options = getOptions.call(this, query) ,它也可以工作。

好的,我想我遵循了 - 因此可能会显示与当前查询不匹配的建议,这是正确的吗?

我将尝试使用此示例代码重新创建问题

好的,我想我遵循了 - 因此可能会显示与当前查询不匹配的建议,这是正确的吗?

确切地! 就我而言,它几乎总是显示上一个查询的结果。 除了响应被缓存在浏览器中并立即返回的情况。

我试图使用 jsfiddle 重新创建它,但没有设法在那里正确连接 lib。
如果您在 jsfiddle 中有此插件的任何基本示例,我可以使用服务器端自动完成示例对其进行扩展。

还值得注意的是,我使用的是 v6,而您的示例似乎是 prev 版本。
“反应标签自动完成”:“6.0.0-beta.5”

我相信这个问题已经被引入到 v6 中,因为希望避免componentWillReceiveProps()由于最近和即将发布的 React 版本的变化。 在新版本中,我重构了仅在 mount 和onInput上更新的建议,这不考虑建议道具更改。

它可以通过使用getDerivedStateFromProps()来解决,但我认为这种方法需要进行一些优化以防止不必要的渲染。

  static getDerivedStateFromProps (props, state) {
    const options = getOptions(props, state)
    return { options }
  }

我在这上面花了几分钟,我想我想出了一个合适的解决方案,下面的动画显示了异步更新的建议道具,并且选项列表在没有任何其他输入的情况下得到更新:

update

更改非常简单,因此我将进行更多测试并提出 PR。

我想useEffect应该很好地涵盖这一点,因为它可以监控选项的变化。

useEffect(() => {
  setOptions(getOptions(props, state))
}, [options]);

我已经发布了v6.0.0-beta.6应该可以解决这个问题。

此页面是否有帮助?
0 / 5 - 0 等级

相关问题

jraack picture jraack  ·  6评论

filippofilip95 picture filippofilip95  ·  4评论

williamsidewalk picture williamsidewalk  ·  4评论

thienanle picture thienanle  ·  9评论

famouspotatoes picture famouspotatoes  ·  5评论