React中如何从多维数组中提取含特定key的对应数据？

实现方案 #

你可以通过数组的filter+map组合完成过滤和ID提取，全程不需要写死索引，适配大批量数据的处理场景，判断键是否存在建议用hasOwnProperty避免值为假值时的误判，同时增加边界容错避免个别异常数据导致报错。

接口数据处理代码优化

if (response.status === 200) {
  console.log(response.data)
  // 过滤出platforms存在且包含one键的项
  const filteredList = response.data.filter(item => {
    // 可选链判空避免item/platforms不存在时报错
    return item?.platforms && Object.prototype.hasOwnProperty.call(item.platforms, 'one')
  })
  // 提取所有符合条件的项的ID
  const validIdList = filteredList.map(item => item.id)
  // 如果需要保留原platforms数据替换原来的list变量，用下面的写法
  // list = filteredList.map(item => item.platforms)
  
  // React 类组件存state示例
  this.setState({ validIdList })
  // React 函数组件存state示例
  // setValidIdList(validIdList)
}

React 页面渲染示例（函数组件）

import { useState, useEffect } from 'react'

export default function IdList() {
  const [validIdList, setValidIdList] = useState([])

  useEffect(() => {
    // 此处替换为你的实际API请求逻辑
    fetch('/your-api-path')
      .then(res => res.json())
      .then(response => {
        if (response.status === 200) {
          const filteredList = response.data.filter(item => {
            return item?.platforms && Object.prototype.hasOwnProperty.call(item.platforms, 'one')
          })
          setValidIdList(filteredList.map(item => item.id))
        }
      })
  }, [])

  return (
    <div>
      <h3>包含one键的项ID列表</h3>
      <ul>
        {validIdList.map(id => (
          <li key={id}>{id}</li>
        ))}
      </ul>
    </div>
  )
}

注意事项

• 可选链?.的容错处理可以避免个别数据项缺失platforms字段时代码崩溃，数据量大时建议保留
• 用hasOwnProperty判断键存在，不会受one对应的值（比如字符串"false"、空值等）影响，完全匹配你「判断key是否存在」的需求
• 整个处理逻辑会自动遍历所有数组项，完全不需要写死固定索引

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