在React Native Picker中仅渲染唯一标签

Question

我有一个JSON，也可以通过http://myjson.com/kfd04

访问

<none>
35.239.29.239

我只想呈现唯一的客户，这是到目前为止的代码。它显示所有客户。 { "response": [ { "id": "1", "customer": "Star Wars", "project": "1977" }, { "id": "2", "customer": "Star Wars", "project": "1985" }, { "id": "3", "customer": "The Matrix", "project": "1999" }, { "id": "4", "customer": "Inception", "project": "2010" }, { "id": "5", "customer": "Interstellar", "project": "2014" } ] } 包含对象的“响应”数组。

responseData

Answer 1

您需要缩小数组以过滤出唯一值，为此，您可以使用reduce方法

const data = {
  "response": [
    {
      "id": "1",
      "customer": "Star Wars",
      "project": "1977"
    },
    {
      "id": "2",
      "customer": "Star Wars",
      "project": "1985"
    },
    {
      "id": "3",
      "customer": "The Matrix",
      "project": "1999"
    },
    {
      "id": "4",
      "customer": "Inception",
      "project": "2010"
    },
    {
      "id": "5",
      "customer": "Interstellar",
      "project": "2014"
    }
  ]
}
const arr = data.response.reduce((acc, item) => {
   if(!acc.includes(item.customer)) {
      acc.push(item.customer);
   }
   return acc;
}, [])

console.log(arr);

然后您可以将其渲染为

render() {

   const reducedArr = this.getUniqueValues();
   return (
         <Picker
            mode="dialog"
            selectedValue={this.state.customerName}
            onValueChange={(itemValue, itemIndex) => {
              this.setState({ customerName: itemValue });
              }
            }
            >
              {
                reducedArr.map((customer) => (
                <Picker.Item label={customer} value={customer} key={customer} />))
              }
            </Picker>
      )
}

或

const data = {
  "response": [
    {
      "id": "1",
      "customer": "Star Wars",
      "project": "1977"
    },
    {
      "id": "2",
      "customer": "Star Wars",
      "project": "1985"
    },
    {
      "id": "3",
      "customer": "The Matrix",
      "project": "1999"
    },
    {
      "id": "4",
      "customer": "Inception",
      "project": "2010"
    },
    {
      "id": "5",
      "customer": "Interstellar",
      "project": "2014"
    }
  ]
}
const arr = data.response.reduce((acc, item) => {
   if(!acc[item.customer]) {
      acc[item.customer] = 1;
   }
   return acc;
}, {})

console.log(arr);

然后您可以将其渲染为

render() {

   const reducedObject = this.getUniqueValues();
   return (
         <Picker
            mode="dialog"
            selectedValue={this.state.customerName}
            onValueChange={(itemValue, itemIndex) => {
              this.setState({ customerName: itemValue });
              }
            }
            >
              {
                Object.keys(reducedObject).map((customer) => (
                <Picker.Item label={customer} value={customer} key={customer} />))
              }
            </Picker>
      )
}

或者要过滤出唯一值，您还可以使用Javascript Set

Answer 2

您可以使用filter来检查具有某个customer的电影的首次出现是否与该循环的当前index具有相同的index。这样，您将只获得所有唯一的。

const movies = [
  {
    id: "1",
    customer: "Star Wars",
    project: "1977"
  },
  {
    id: "2",
    customer: "Star Wars",
    project: "1985"
  },
  {
    id: "3",
    customer: "The Matrix",
    project: "1999"
  },
  {
    id: "4",
    customer: "Inception",
    project: "2010"
  },
  {
    id: "5",
    customer: "Interstellar",
    project: "2014"
  }
];

const uniqueMovies = movies.filter((movie, index) => {
  return movies.findIndex(m => m.customer === movie.customer) === index;
});

console.log(uniqueMovies);

Answer 3

您可以使用以下功能，例如uniqueArray = removeDuplicates(response, 'customer')

function removeDuplicates(myArr, prop) {
    return myArr.filter((obj, pos, arr) => {
        return arr.map(mapObj => mapObj[prop]).indexOf(obj[prop]) === pos;
    });
}