Reactjs 在React Concurrent中显示加载状态，但也显示以前的结果会发出警告

更新：好的，如果我误解了useDeferredValue，我认为它更像是一个取消公告的值，但事实并非如此，您可以将超时定义为显示旧结果的时间

所以

const search=usedferredvalue（值，{timeoutMs:10000}）

给了我想要的效果，只是它仍然显示警告权知道

原创

我想用下面的结果进行搜索，搜索结果应根据文本字段的输入立即过滤。然后，应取消公告查询，并且当所需时间少于3000 m.s.时，也应显示旧结果

我正在使用React和Relay实验中的新并发模式。我使用了新的useDeferredValue，记录在本页上：

但我得到了这个警告：

Warning: Asynchronous triggered a user-blocking update that suspended.

The fix is to split the update into multiple parts: a user-blocking update to provide immediate feedback, and another update that triggers the bulk of the changes.

Refer to the documentation for useTransition to learn how to implement this pattern

我不明白，因为它的工作，但它仍然给我一个警告

我的代码：

import-React{
悬念,，
useState，
//@ts ignore-usedferredvalue在类型中尚不存在
usedferredvalue，
//@ts ignore-usedferredvalue在类型中尚不存在
//使用转换，
使用回调，
ChangeEvent，
}从“反应”
从“@material ui/core/TextField”导入TextField
从“@material ui/core/LinearProgress”导入LinearProgress
从“babel插件中继/宏”导入{graphql}
从'react relay/hooks'导入{useLazyLoadQuery}
进口{
FlowBlockFinderQuery，
FlowBlockFinderQueryResponse，
}来自“../\uuuuu生成的\uuuu/FlowBlockFinderQuery.graphql”
从“../helpers/ErrorBoundaryWithRetry”导入ErrorBoundaryWithRetry
接口RenderFuncProps{
搜索：字符串
过滤器搜索：字符串
}
函数QueryResults（{search，filterSearch}:RenderFuncProps）{
const{blocks}:FlowBlockFinderQueryResponse=useLazyLoadQuery<
FlowBlockFinderQuery
>(
图形ql`
查询FlowBlockFinderQuery（$search:String）{
块（搜索：$search）{
身份证件
标题
描述
鼻涕虫
块状
}
}
`,
{search}，
{fetchPolicy:'存储或网络'}
)
返回(
{块
.过滤器(
块=>
！过滤器搜索||
block.title.toLowerCase（）.includes（filterSearch.toLowerCase（））
)
.map（块=>(
{block.title}
))}
)
}
函数结果（{search，filterSearch}:RenderFuncProps）{
返回(
Zoekterm:{filterSearch}
呃，让我们一起来}
>
)
}
导出默认函数异步（）{
const[value，setValue]=useState（“”）
//const[search，setSearch]=useState（“”）
const search=usedferredvalue（值，{timeoutMs:3000}）
//常量[startTransition，isPending]=useTransition（暂挂配置）
const onInputChange=useCallback(
（事件：ChangeEvent）=>{
//开始转换（（）=>{
设置值（event.currentTarget.value）
// })
},
[设定值]
)
返回(


)
}

React docs“如果某个状态更新导致组件挂起，则该状态更新应包装在转换中”。您必须使异步请求暂挂兼容，并在useTransition中获取查询

下面是react docs的一个示例

function handleChange(e) {
  const value = e.target.value;

  // Outside the transition (urgent)
  setQuery(value);

  startTransition(() => {
    // Inside the transition (may be delayed)
    setResource(fetchTranslation(value));
  });
 }

和代码沙箱