Array.filter 不适用于数组，包括对象

Question

我有一个这样的数组。

我只需要branchId。所以我使用过滤器方法来过滤这个数组并将branchId存储在react state中。

 const [branchID,setBranchID]=React.useState([]);
 const tempTwo=[
       {
          branchId: "61b25e0ae177d62ce4cb3b47",
          branchName: "Shopzier Malabe Branch"
       },
       {
          branchId: "61aa4f802aed6f0022102a99"
          branchName: "Test Branch New Update"
      },
      {
         branchId: "619f346f17b5522b184d5c01",
         branchName: "Shopzier Main Branch Update Trest12"
      }
   ]
 React.useEffect(()=>{
    setBranchID([...tempTwo.filter(item=>item.branchId)])
  },[])

但是当我控制台记录 branchID 时，它会打印我的完整数组，而不仅仅是 branchID。 如何从我的 Object 数组中过滤 branchID。 我不知道出了什么问题，为什么会这样。 如果有人可以帮助我，我真的很感激。 谢谢。

Answer 1

我认为您误解了过滤器 function 的实际作用。

您应该使用 map 运算符来从数组中提取属性，如下所示：

 React.useEffect(()=>{
    setBranchID([...tempTwo.map(item=>item.branchId)])
  },[])

Answer 2

Filter用于过滤掉与给定条件匹配的所有对象，在您的情况下，具有 id。 要仅从列表中获取 id，您需要使用map

const idList = tempTwo.map(item=> item.branchId)

Answer 3

简单的方法来做到这一点。 您可以使用 map function 和 matchId 从数组中提取数据来执行此操作。

const [branchID,setBranchID]=React.useState("");
 const tempTwo=[
       {
          branchId: "61b25e0ae177d62ce4cb3b47",
          branchName: "Shopzier Malabe Branch"
       },
       {
          branchId: "61aa4f802aed6f0022102a99"
          branchName: "Test Branch New Update"
      },
      {
         branchId: "619f346f17b5522b184d5c01",
         branchName: "Shopzier Main Branch Update Trest12"
      }
   ]
 React.useEffect(()=>{
    tempTwo.map((branchData, i) => {
      //match your branch id value
      if (branchData.branchId === some_id) {
        setBranchID(branchData.branchId)
      }
    })
  },[])