Javascript 在React.js中的“urql”GraphQL客户机中执行查询时对输入进行解块

我有一个类似于

min

和

max

值的双滑块。当其中一个滑块更改时，它调用查询

但是由于查询非常庞大，需要花费很多时间&我需要找到一种使用debounce的方法，这样查询就不会经常被调用

我确实找到了一个很好的解决办法→ 只使用React.js，但不确定如何将其与

urql

一起使用

Home.tsx

从“React”导入React
从“反应滑块”导入反应滑块
从“lodash.debounce”导入debounce
从“../components/index”导入{AcquisitionList}
常量Home=（）=>{
const[price，setPrice]=React.useState（[0，100000000]）
const debounceSetPrice=React.useCallback（debounce（setPrice，2000），[]））
返回(
分钟
{
const minPrice=e.target.value
const maxPrice=价格[1]
debounceSetPrice（[minPrice，maxPrice]）
}}
/>
{
debounceSetPrice（价格）
}}
/>
马克斯
{
const minPrice=价格[0]
const maxPrice=e.target.value
debounceSetPrice（[minPrice，maxPrice]）
}}
/>
)
}
导出默认主页

AcquisitionList.tsx

从“React”导入React
从“urql”导入{useQuery}
从“../components/index”导入{Card}
进口{
获得所有收购，
按价格进行收购，
}来自“../graphql/index”
export const AcquisitionList=（{minPrice，maxPrice}）=>{
const[result，reexecuteQuery]=useQuery({
查询：获取所有收购，
变量：{
明普莱斯，
maxPrice，
跳过：10，
拍摄：10，
},
})
常量{数据，获取，错误}=结果
如果（提取）返回加载

if（error）返回Oh no..{error.message}

返回(
{data.getAllAcquisitions.map（（启动，i）=>{
返回
})}
)
}

我当前的解决方案将滑块值更改延迟2秒，这在我直接调用

debounceSetPrice

时很有意义。我如何着手解决这个问题？

我找到了解决方案：

const Home=（）=>{
const priceRange=[0，10000000000]//最小价格=0，最大价格=1000亿
const timeout=React.useRef（null）
常量[acquisitionPriceRange，setAcquisitionPriceRange]=React.useState(
价格范围
)
const[price，setPrice]=React.useState（priceRange）
React.useffect（（）=>{
timeout.current=setTimeout（（）=>{
setAcquisitionPriceRange（价格）
timeout.current=null
}, 2000)
return（）=>{
if（timeout.current）clearTimeout（timeout.current）
}
}，[价格]）
返回(
.
.
.
)
}
导出默认主页

---

我同步设置了该值，这样UI就不会被延迟&为我在

React.useffect

中传递的状态排队等待解块。我将相同的取消公告状态传递到

立即传递道具，但在获取组件内部使用超时（将道具保存到状态并延迟），使用状态中的值进行查询。。。将

useffect

/

加载

/

onComplete

状态/事件与timeout@xadm这看起来很简单，谢谢：）@xadm我上面的

useffect

和

useDebounce

中的

react-use

有什么区别。看起来有点像我？是的，只是随时可用、可重用、经过测试等等；）

import React from 'react'
import ReactSlider from 'react-slider'
import debounce from 'lodash.debounce'

import { AcquisitionList } from '../components/index'

const Home = () => {
  const [price, setPrice] = React.useState([0, 1000000000])
  const debounceSetPrice = React.useCallback(debounce(setPrice, 2000), [])

  return (
    <div className="h-full p-8 text-white bg-blue-gray-900">
      <div className="flex items-center justify-center">
        <div className="flex flex-col items-center text-white">
          <span className="">Min</span>
          <input
            className="text-lg font-bold text-center min-w-16 rounded-xl bg-gradient-to-b from-indigo-700 bg-blue-gray-900"
            name="minPrice"
            type="text"
            value={price[0]}
            onChange={(e) => {
              const minPrice = e.target.value
              const maxPrice = price[1]
              debounceSetPrice([minPrice, maxPrice])
            }}
          />
        </div>
        <ReactSlider
          step={1}
          min={0}
          max={1000000000}
          className="w-1/2 h-5 pr-2 mx-8 my-4 rounded-md bg-blue-gray-700 cursor-grab"
          thumbClassName="absolute w-8 h-8 cursor-[grab] rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 ring-offset-blue-gray-700 -top-1 bg-gradient-to-b from-indigo-700 bg-blue-gray-900 focus:ring-indigo-500 focus:border-indigo-500"
          ariaLabel={['Min Price', 'Max Price']}
          value={price}
          onChange={(price) => {
            debounceSetPrice(price)
          }}
        />
        <div className="flex flex-col items-center text-white">
          <span className="">Max</span>
          <input
            className="text-lg font-bold text-center min-w-16 rounded-xl bg-gradient-to-b from-indigo-700 bg-blue-gray-900"
            name="maxPrice"
            type="text"
            value={price[1]}
            onChange={(e) => {
              const minPrice = price[0]
              const maxPrice = e.target.value
              debounceSetPrice([minPrice, maxPrice])
            }}
          />
        </div>
      </div>
      <AcquisitionList minPrice={price[0]} maxPrice={price[1]} />
    </div>
  )
}

export default Home

import React from 'react'
import { useQuery } from 'urql'

import { Card } from '../components/index'

import {
  GET_ALL_ACQUISITIONS,
  GET_ACQUISITIONS_BY_PRICE,
} from '../graphql/index'

export const AcquisitionList = ({ minPrice, maxPrice }) => {
  const [result, reexecuteQuery] = useQuery({
    query: GET_ALL_ACQUISITIONS,
    variables: {
      minPrice,
      maxPrice,
      skip: 10,
      take: 10,
    },
  })

  const { data, fetching, error } = result

  if (fetching) return <p>Loading...</p>
  if (error) return <p>Oh no... {error.message}</p>

  return (
    <div className="flex flex-wrap justify-center mt-10">
      {data.getAllAcquisitions.map((startup, i) => {
        return <Card key={i} startup={startup} index={i} />
      })}
    </div>
  )
}

const Home = () => {
  const priceRange = [0, 100000000000] // minPrice = 0, maxPrice = 100 billion
  const timeout = React.useRef(null)
  const [acquisitionPriceRange, setAcquisitionPriceRange] = React.useState(
    priceRange
  )
  const [price, setPrice] = React.useState(priceRange)

  React.useEffect(() => {
    timeout.current = setTimeout(() => {
      setAcquisitionPriceRange(price)
      timeout.current = null
    }, 2000)
    return () => {
      if (timeout.current) clearTimeout(timeout.current)
    }
  }, [price])

  return (
    <div className="h-full min-h-screen p-8 text-white bg-blue-gray-900">
      .
            .
            .
      <AcquisitionList
        minPrice={acquisitionPriceRange[0]}
        maxPrice={acquisitionPriceRange[1]}
        undisclosed={enabled}
        sortByPrice={sortByPrice}
        sortByStartupName={sortByStartupName}
      />
    </div>
  )
}

export default Home