如何在React中使用JavaScript过滤数据获取对应运营商的专属充值产品

你当前的过滤逻辑没有匹配用户选中的运营商ID，只是筛选出了所有存在id字段的产品组，所以返回了全部产品列表，按以下步骤修改即可：

1. 新增状态存储选中的运营商ID #

在React组件中通过useState存储用户选中的运营商ID，初始值可设为空：

import { useState } from 'react'

// 组件内定义状态
const [selectedOperatorId, setSelectedOperatorId] = useState('')

在运营商选择交互（如下拉选择、点击运营商项）触发时，将选中运营商的id赋值给状态：

// 示例：点击运营商项时触发
const handleOperatorSelect = (operatorId) => {
  setSelectedOperatorId(operatorId)
}

2. 过滤匹配对应产品 #

使用数组find方法匹配和选中ID一致的产品组，效率高于filter（因为运营商ID和产品组是一一对应的关系，找到第一个匹配项就会停止遍历）：

// 仅当选中了运营商时才执行匹配
const matchedProduct = selectedOperatorId 
  ? state.products.find(item => item.id === selectedOperatorId)
  : null

如果数据量较大，可以提前把产品列表转成ID映射对象做性能优化，避免每次渲染都遍历数组：

import { useMemo } from 'react'

// 组件内用useMemo缓存映射关系，仅当products变化时才重新计算
const productMap = useMemo(() => {
  return state.products.reduce((prev, curr) => {
    prev[curr.id] = curr
    return prev
  }, {})
}, [state.products])

// 直接取对应ID的产品即可
const matchedProduct = selectedOperatorId ? productMap[selectedOperatorId] : null

3. 渲染充值选项卡片 #

判断匹配到产品后，遍历产品数组渲染充值卡片即可：

return (
  <div>
    {/* 你的运营商选择组件，选择时调用handleOperatorSelect传入对应ID */}
    <OperatorList 
      operators={state.operators}
      onSelect={handleOperatorSelect}
    />

    {/* 渲染对应充值选项 */}
    {matchedProduct ? (
      <div className="recharge-card-wrapper">
        {matchedProduct.products.map((productName, idx) => (
          <div key={idx} className="recharge-card">
            {productName}
            {/* 可追加点击充值的业务逻辑 */}
          </div>
        ))}
      </div>
    ) : (
      <p>请先选择运营商</p>
    )}
  </div>
)

内容的提问来源于stack exchange，提问作者user16327371