如何過濾來自socket.io的數據

Question

我在下面的示例 socket.io 中將數據從我的 API 推送到客戶端（每隔幾秒鍾）並將這些數據作為對象數組存儲在狀態中。 每次發出數據時都會更新視圖。

useEffect(() => {
  socket.on('options', data => {
    setOptions(options => [...data, ...options])
  })
}, [])

這工作正常，但現在我希望選擇通過客戶端的套接字在此處通過復選框圖像過濾此數據。 這是數據的一個例子。

const OPTIONS = [
  {
    date: '2020-05-28',
    time: '19:21:00',
    ticker: 'SPY',
    description:
      'SPDR S&P 500 Option Alert: Fri $302 Puts Sweep (7) near the Ask: 500 @ $0.861 vs 11014 OI; Ref=$304.86',
  },
  {
    date: '2020-05-28',
    time: '19:21:01',
    ticker: 'AR',
    description:
      'Antero Resources Option Alert: Aug 21 $4 Calls Sweep (4) near the Bid: 350 @ $0.551 vs 2600 OI; Ref=$3.29',
  },
  {
    date: '2020-05-28',
    time: '19:20:57',
    ticker: 'NFLX',
    description:
      'Netflix Option Alert: Fri $400 Puts Sweep (3) below Bid!: 500 @ $0.327 vs 5115 OI; Earnings 7/15 After Close [est] Ref=$417.0',
  },
  {
    date: '2020-05-28',
    time: '19:21:21',
    ticker: 'SMH',
    description:
      'VanEck Vectors Semiconductor ETF Option Alert: Jul 17 $115 Puts Sweep (12) near the Ask: 645 @ $1.17 vs 3112 OI; Ref=$140.11',
  },
]

例如，如果我選中“Near the Ask”和“$1 or less”，它將返回

{
    date: '2020-05-28',
    time: '19:21:00',
    ticker: 'SPY',
    description:
      'SPDR S&P 500 Option Alert: Fri $302 Puts Sweep (7) near the Ask: 500 @ $0.861 vs 11014 OI; Ref=$304.86',
  },

和任何其他進入 socket 的東西都會發出符合這個標准的東西。 但是如果我取消選中“低於 1 美元”並且只有“接近要價”，它將返回

{
    date: '2020-05-28',
    time: '19:21:00',
    ticker: 'SPY',
    description:
      'SPDR S&P 500 Option Alert: Fri $302 Puts Sweep (7) near the Ask: 500 @ $0.861 vs 11014 OI; Ref=$304.86',
  },
{
    date: '2020-05-28',
    time: '19:21:00',
    ticker: 'SPY',
    description:
      'SPDR S&P 500 Option Alert: Fri $302 Puts Sweep (7) near the Ask: 500 @ $0.861 vs 11014 OI; Ref=$304.86',
  },

以及任何符合來自 socket 的標准的東西。

這是代碼庫以供更多參考

import React, {useState, useEffect} from 'react'
import _ from 'lodash'
import io from 'socket.io-client'

import styles from './Flow.module.scss'

import {FLOW_ROW_NAME} from './flow-data'

import {ENVIRONMENT} from '../../env'

import FlowList from './FlowList'

export default function Flow() {
  const [options, setOptions] = useState([])
  const [searchInput, setSearchInput] = useState('')
  const socket = io(ENVIRONMENT.DATA_SERVER_URL)

  useEffect(() => {
    socket.on('all_options', function (data) {
      setOptions(options => [...options, ...data])
    })

    socket.on('options', data => {
      setOptions(options => _.uniqBy([...data, ...options], 'id'))
    })

    socket.on('clear', function () {
      setOptions([])
    })
  }, [])

  return (
    <div className={styles.flow_background_color}>
      <div className={styles.desktop_view}>
        <div className={styles.row_list}>
          {FLOW_ROW_NAME.map(data => {
            return (
              <div
                className={styles.row_name}
                style={{
                  paddingLeft: `${data.padding}rem`,
                }}
                key={data.name}
              >
                {data.name}
              </div>
            )
          })}
        </div>
        <div>
          <ul className={styles.ul_list}>
            {options.map((data, index) => (
              <FlowList
                key={index}
                ticker={data.ticker}
                strike_price={data.strike_price}
                date_expiration={data.date_expiration}
                put_call={data.put_call}
                option_activity_type={data.option_activity_type}
                description={data.description}
                sentiment={data.sentiment}
                cost_basis={data.cost_basis}
                updated={data.updated}
                onClick={() => filterData(data.ticker)}
              />
            ))}
          </ul>
        </div>
      </div>
    </div>
  )
}

Answer 1

我認為鑒於無限數據的實時流量，我認為在前端過濾它會產生一些性能問題，但無論如何這是我的想法：

options.map((data, index) => ...)

應該：

options.filter(myFilterFunction).map((data, index) => ...)

函數本身應該檢查選定的過濾器（您也應該為它們使用狀態），這就是您將如何僅渲染過濾的過濾器而不丟棄任何數據：

const myFilterFunction = (option) => {/*some if statements for the checked filters and option properties here*/}

如果您想通過為過濾選項使用另一個數組消耗更多內存並檢查過濾器是否在 socket.on('options', data =>...可能只想過濾新選項。