试图根据React-Redux Store过滤单个对象的ID过滤单个对象时获取一个空数组

Question

我的过滤器功能当前正在返回一个空数组。而不是基于ID包含匹配对象的数组。

控制台：

operators (51) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]0: created_at: "2022-06-02T07:21:08.492Z"id: 3name: "operator1"phone: 1478subdomain: "test101"updated_at: "2022-06-02T07:21:08.492Z"user_id: 1[[Prototype]]: Object1: {id: 4, name: 'operator4', phone: 14785, subdomain: 'test104', created_at: '2022-06-02T13:13:42.898Z', …}2: {id: 5, name: 'operator12', phone: 14782, subdomain: 'test20', created_at: '2022-06-03T06:51:12.950Z', …}3: {id: 2, name: 'test1r', phone: 1234451699, subdomain: 'sub10', created_at: '2022-06-01T15:51:29.098Z', …}4: {id: 6, name: 'operator16', phone: 147823, subdomain: 'test21', created_at: '2022-06-06T14:17:25.576Z', …}5: {id: 7, name: 'operator22', phone: 1478237, subdomain: 'test213', created_at: '2022-06-06T14:59:30.342Z', …}6: {id: 8, name: 'operator23', phone: 14782376, subdomain: 'test2153', created_at: '2022-06-06T17:07:34.840Z', …}7: {id: 9, name: 'crystal parking', phone: 81059218, subdomain: 'sub27', created_at: '2022-06-07T17:56:09.142Z', …}8: {id: 10, name: 'lay park', phone: 70255956, subdomain: 'sub11', created_at: '2022-06-07T22:32:54.829Z', …}9: {id: 11, name: 'monk parking', phone: 82059218, subdomain: 'sub07', created_at: '2022-06-07T22:35:24.980Z', …}10: {id: 12, name: 'mabilla park', phone: 71255956, subdomain: 'sub04', created_at: '2022-06-07T22:38:09.079Z', …}11: {id: 13, name: 'java parking', phone: 81055418, subdomain: 'sub19', created_at: '2022-06-07T23:07:42.734Z', …}12: {id: 14, name: 'loading park', phone: 81159215, subdomain: 'sub24', created_at: '2022-06-07T23:11:51.894Z', …}13: {id: 15, name: 'laya park', phone: 70255752, subdomain: 'test2167', created_at: '2022-06-07T23:25:47.786Z', …}14: {id: 16, name: 'cornerStone park', phone: 70980956, subdomain: 'sub21', created_at: '2022-06-09T08:23:47.909Z', …}15: {id: 17, name: 'IPC Staging', phone: null, subdomain: 'ipc-staging', created_at: '2022-06-09T19:31:21.886Z', …}16: {id: 18, name: 'operator121331', phone: 1245787989, subdomain: 'test46', created_at: '2022-06-16T11:43:54.280Z', …}17: {id: 19, name: 'operator81', phone: 124548, subdomain: 'dsrt7', created_at: '2022-06-16T12:36:08.918Z', …}18: {id: 20, name: 'operator87', phone: 124542, subdomain: 'dsrt5', created_at: '2022-06-16T13:40:33.744Z', …}19: {id: 21, name: 'operator88', phone: 124541, subdomain: 'dsrt9', created_at: '2022-06-17T21:25:24.321Z', …}20: {id: 23, name: 'operator89', phone: 124544, subdomain: 'dsrt11', created_at: '2022-06-17T21:29:02.275Z', …}21: {id: 24, name: 'PLECCO Technologies, Inc.', phone: 184334589, subdomain: 'titos1', created_at: '2022-06-18T05:46:53.596Z', …}22: {id: 25, name: 'sat park', phone: 1923671, subdomain: 'sub13', created_at: '2022-06-18T11:49:40.806Z', …}23: {id: 26, name: 'me park', phone: 1923679, subdomain: 'sub14', created_at: '2022-06-18T13:25:14.101Z', …}24: {id: 27, name: 'lushu park', phone: 1923673, subdomain: 'sub06', created_at: '2022-06-20T07:21:06.236Z', …}25: {id: 28, name: 'lome park', phone: 1923672, subdomain: 'sub09', created_at: '2022-06-20T08:37:14.750Z', …}26: {id: 29, name: 'operator85', phone: 124546, subdomain: 'dsrt13', created_at: '2022-06-21T15:08:52.690Z', …}27: {id: 30, name: 'ladaf park', phone: 1923677, subdomain: 'sub18', created_at: '2022-06-21T15:13:51.959Z', …}28: {id: 31, name: 'operator123', phone: 147821, subdomain: 'test120', created_at: '2022-06-23T00:35:39.639Z', …}29: {id: 32, name: 'operator121339', phone: 1245787982, subdomain: 'test09', created_at: '2022-06-24T13:05:35.451Z', …}30: {id: 33, name: 'operator121332', phone: 1245787981, subdomain: 'test01', created_at: '2022-06-24T23:30:48.697Z', …}31: {id: 34, name: 'authen parking', phone: 19236731, subdomain: 'sub16', created_at: '2022-06-26T14:53:01.328Z', …}32: {id: 35, name: 'larky', phone: 1923675, subdomain: 'sub023', created_at: '2022-06-26T17:21:51.401Z', …}33: {id: 36, name: 'operator131332', phone: 1245747981, subdomain: 'test03', created_at: '2022-06-26T22:18:44.953Z', …}34: {id: 37, name: 'warm park', phone: 1225747981, subdomain: 'test04', created_at: '2022-06-26T22:21:44.050Z', …}35: {id: 38, name: 'wood park', phone: 1623673, subdomain: 'sub018', created_at: '2022-06-26T22:58:01.366Z', …}36: {id: 39, name: 'look park', phone: 1523672, subdomain: 'sub33', created_at: '2022-06-26T23:06:42.957Z', …}37: {id: 40, name: 'vodo park', phone: 1123676, subdomain: 'sub221', created_at: '2022-06-26T23:37:22.580Z', …}38: {id: 41, name: 'demo park', phone: 1923372, subdomain: 'sub031', created_at: '2022-06-27T13:21:47.356Z', …}39: {id: 42, name: 'hilltop parking', phone: 1923674, subdomain: 'sub034', created_at: '2022-06-27T14:11:32.882Z', …}40: {id: 43, name: 'lagos park', phone: 1923572, subdomain: 'sub035', created_at: '2022-06-28T14:21:40.734Z', …}41: {id: 44, name: 'ooiuwdddt', phone: 787494, subdomain: 'subd', created_at: '2022-07-06T16:07:18.592Z', …}42: {id: 45, name: 'latam park', phone: 1922671, subdomain: 'sub091', created_at: '2022-07-06T16:29:14.202Z', …}43: {id: 46, name: 'find parking', phone: 1920674, subdomain: 'sub049', created_at: '2022-07-06T21:06:55.743Z', …}44: {id: 47, name: 'lotus', phone: 787491, subdomain: 'sub016', created_at: '2022-07-07T08:25:42.692Z', …}45: {id: 48, name: 'manti park', phone: 1913676, subdomain: 'sub019', created_at: '2022-07-07T12:34:14.164Z', …}46: {id: 49, name: 'lumbak parking', phone: 1913671, subdomain: 'sub087', created_at: '2022-07-07T17:29:36.156Z', …}47: {id: 50, name: 'agbor park', phone: 1923670, subdomain: 'sub071', created_at: '2022-07-07T17:52:41.114Z', …}48: {id: 51, name: 'lotus1', phone: 787496, subdomain: 'sub634', created_at: '2022-07-07T19:14:03.874Z', …}49: {id: 52, name: 'peak park', phone: 1923676, subdomain: 'sub041', created_at: '2022-07-07T19:39:53.717Z', …}50: {id: 53, name: 'fungy park', phone: 1923571, subdomain: 'sub032', created_at: '2022-07-07T19:53:41.606Z', …}length: 51[[Prototype]]: Array(0)
NewLocation.js:41 

operator []

length: 0[[Prototype]]: Array(0)

我的代码：

const NewLocations = () => {
  const { operatorId } = useParams();
  console.log('id', operatorId);
  const [successful, setSuccessful] = useState(false);
  const operators = useSelector((state) => state.operators.data)
  console.log('operators', operators);
  const operator = operators.filter((operator) => operator.id === operatorId)
  console.log('operator', operator);
  
  remaining codes... 

我真的不知道我缺少什么...

我有检查类似的问题/解决方案，但没有解决我的问题。

Answer 1

useParams挂钩将返回任何值作为字符串。在您的情况下，您需要operatorId是号码。您可以使用parseint使比较起作用：

const operator = operators.filter((operator) => operator.id === parseInt(operatorId));

Answer 2

可能是您要提取的ID在操作员数组中不存在的ID，这就是为什么您要获得一个空数组的原因，

无论ID是否存在，都可以运行此代码行

  const operator = operators.filter((operator) => operator.id !== operatorId)