时间戳

首页 > 解决方案 > ReactJS 对象过滤器在 componentDidMount 上未定义

javascript - ReactJS 对象过滤器在 componentDidMount 上未定义

问题描述

我用来map进入：datacomponentDidMount

componentDidMount() {
  const DistrictOptions = Data.DistrictData.map((obj) => ({
    key: obj.id,
    text: obj.name,
    value: obj.id,
    cid: obj.cid
  }));

console.log(DistrictOptions); // return data successfully
}

它成功返回数据，现在我想对这个对象做一个过滤器，我特雷德：

const DistrictOptions = Data.DistrictData.filter(x => x.cid === 1).map((v, i) => {
  return {
    key: i,
    value: v.id,
    text: v.name
  }
});

但是这个返回空数组[]我也试过这个：

const opt = DistrictOptions.find(x => x.cid === 1);

但是这个返回undefined，混淆了这里发生的事情和我做错了什么。这是Data.DistrictData：

const Data = {
    DistrictData: [{
        "id": "1",
        "name": "ss 1",
        "cid": "1"
      }, {
        "id": "2",
        "name": "ss 2",
        "cid": "1"
      }, {
        "id": "3",
        "name": "ss 3",
        "cid": "1"
      }
    ]
}

标签： javascriptreactjs

解决方案

您可以使用==比较器进行比较cid，如图所示或使用===运算符并将您的转换cid为数字：

使用 ==

const DistrictOptions = Data.DistrictData.filter(x => x.cid == 1).map((v, i) => {
  return {
    key: i,
    value: v.id,
    text: v.name
  }
});

使用 ===

const DistrictOptions = Data.DistrictData.filter(x => Number(x.cid, 10) == 1).map((v, i) => {
  return {
    key: i,
    value: v.id,
    text: v.name
  }
});

您还可以parseInt(x.cid,10)用于转换为整数。

推荐阅读