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

Question

UPDATE：好吧，我误解了useDeferredValue，我认为它更像是一个去抖动的值，但事实并非如此，您可以将超时定义为显示旧结果的时间。

所以

const search = useDeferredValue(value, { timeoutMs: 10000 })

给我想要的效果！

我想进行下面的搜索，搜索结果应根据文本字段的输入立即过滤。然后查询应进行反跳操作，并且旧结果还应显示花费的时间少于例如3000米

我正在React和Relay实验中使用新的并发模式。我使用了新的useDeferredValue，在此页面上进行了记录：https://reactjs.org/docs/concurrent-mode-reference.html#usetransition

但是我得到了这个警告：

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, {
  Suspense,
  useState,
  // @ts-ignore - useDeferredValue does not exist yet in types
  useDeferredValue,
  // @ts-ignore - useDeferredValue does not exist yet in types
  // useTransition,
  useCallback,
  ChangeEvent,
} from 'react'
import TextField from '@material-ui/core/TextField'
import LinearProgress from '@material-ui/core/LinearProgress'
import { graphql } from 'babel-plugin-relay/macro'
import { useLazyLoadQuery } from 'react-relay/hooks'
import {
  FlowBlockFinderQuery,
  FlowBlockFinderQueryResponse,
} from '../__generated__/FlowBlockFinderQuery.graphql'
import ErrorBoundaryWithRetry from '../helpers/ErrorBoundaryWithRetry'

interface RenderFuncProps {
  search: string
  filterSearch: string
}

function QueryResults({ search, filterSearch }: RenderFuncProps) {
  const { blocks }: FlowBlockFinderQueryResponse = useLazyLoadQuery<
    FlowBlockFinderQuery
  >(
    graphql`
      query FlowBlockFinderQuery($search: String) {
        blocks(search: $search) {
          id
          title
          description
          slug
          blockType
        }
      }
    `,
    { search },
    { fetchPolicy: 'store-or-network' }
  )
  return (
    <div>
      {blocks
        .filter(
          block =>
            !filterSearch ||
            block.title.toLowerCase().includes(filterSearch.toLowerCase())
        )
        .map(block => (
          <div key={block.id} style={{ fontSize: 19 }}>
            {block.title}
          </div>
        ))}
    </div>
  )
}
function Results({ search, filterSearch }: RenderFuncProps) {
  return (
    <>
      Zoekterm: {filterSearch}
      <ErrorBoundaryWithRetry
        fallback={({ error }) => <div>Er is iets foutgegaan</div>}
      >
        <Suspense fallback={<LinearProgress />}>
          <QueryResults search={search} filterSearch={filterSearch} />
        </Suspense>
      </ErrorBoundaryWithRetry>
    </>
  )
}

export default function Asynchronous() {
  const [value, setValue] = useState('')
  // const [search, setSearch] = useState('')
  const search = useDeferredValue(value, { timeoutMs: 3000 })
  // const [startTransition, isPending] = useTransition(SUSPENSE_CONFIG)
  const onInputChange = useCallback(
    (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
      // startTransition(() => {
      setValue(event.currentTarget.value)
      // })
    },
    [setValue]
  )

  return (
    <div style={{ display: 'flex', flexDirection: 'column' }}>
      <TextField
        label="Nieuw of bestaand blok"
        fullWidth
        variant="outlined"
        value={value}
        onChange={onInputChange}
      />
      <br />

      <Results search={search} filterSearch={value} />
    </div>
  )
}

Answer 1

[好吧，我误解了useDeferredValue，我认为它更像是一个去抖动的值，但事实并非如此，您可以将超时定义为显示旧结果的时间。

所以

  const search = useDeferredValue(value, { timeoutMs: 10000 })

给我想要的效果！