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

Question

我有一个这样的数组。

我只需要branchId。所以我使用filter方法过滤这个数组并将branchId存储在react状态。

 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。 如何从我的对象数组中过滤 branchID。我不知道出了什么问题，为什么会这样。如果有人可以帮助我，我真的很感激。谢谢。

Answer 1

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

您应该使用 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 函数和 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)
      }
    })
  },[])