从数组中获取唯一值以用于 ListItem

Question

我有一个包含每个用户位置的 object 数组。我正在尝试按位置对它们进行分组，并将其用作我的 React 本机组件中的标题，但我在过滤位置时遇到困难属性并且可以在正确的方向上使用推送。

这是数组的示例：

const Users = [
    {
        id: 1,
        name: "user1",
        image: require("../assets/1.jpeg"),
        location: "Portland"
    },
    {
        id: 2,
        name: "user2",
        image: require("../assets/2.jpeg"),
        location: "Portland"
    },
    {
        id: 3,
        name: "user3",
        image: require("../assets/3.jpeg"),
        location: "New York"
    },
    {
        id: 4,
        name: "user4",
        image: require("../assets/4.jpeg"),
        location: "Pullman"
    },
    {
        id: 5,
        name: "user5",
        image: require("../assets/5.jpeg"),
        location: "Portland"
    },
    {
        id: 6,
        name: "user6",
        image: require("../assets/6.jpeg"),
        location: "San Francisco"
    },
    {
        id: 7,
        name: "user7",
        image: require("../assets/7.jpeg"),
        location: "Pullman"
    },
];

这是组件。我已经尝试过 filter 和 reduce 方法，但我得到了相同的重复结果，因为它正在评估整个 object。我只想 return 位置属性.

的唯一值

const userItems = ({ item }) => {
    return (
        <>
            <ThemeProvider theme={ListItemTheme}>
                <View>
                    {Users.filter(
                        (currentValue, index, arr) => arr.indexOf(currentValue) === index
                    ).map((user) => (
                        <View style={styles.userContainer}>
                            <ListItem.Title key={user.id}>{user.location}</ListItem.Title>
                        </View>
                    ))}
                </View>
            </ThemeProvider>
        </>
    );
};

尝试使用 reduce 方法。

const userItems = ({ item }) => {
    return (
        <>
            <ThemeProvider theme={ListItemTheme}>
                <View>
                    {Users.reduce(
                        (acc, currentValue) =>
                            acc.includes(currentValue.location)
                                ? acc
                                : [...acc, currentValue],
                        []
                    ).map((user) => (
                        <View style={styles.userContainer}>
                            <ListItem.Title key={user.id}>{user.location}</ListItem.Title>
                        </View>
                    ))}
                </View>
            </ThemeProvider>
        </>
    );
};

Answer 1

编辑我误解了问题，我建议使用 reduce.

note 我将所有 require 语句都设为字符串运行

const Users = [{
    id: 1,
    name: "user1",
    image: 'require("../assets/1.jpeg")',
    location: "Portland"
  },
  {
    id: 2,
    name: "user2",
    image: 'require("../assets/2.jpeg")',
    location: "Portland"
  },
  {
    id: 3,
    name: "user3",
    image: 'require("../assets/3.jpeg")',
    location: "New York"
  },
  {
    id: 4,
    name: "user4",
    image: 'require("../assets/4.jpeg")',
    location: "Pullman"
  },
  {
    id: 5,
    name: "user5",
    image: 'require("../assets/5.jpeg")',
    location: "Portland"
  },
  {
    id: 6,
    name: "user6",
    image: 'require("../assets/6.jpeg")',
    location: "San Francisco"
  },
  {
    id: 7,
    name: "user7",
    image: 'require("../assets/7.jpeg")',
    location: "Pullman"
  },
];

console.log(Users.reduce((acc, val) => {
  acc[val.location] = acc[val.location] ? [...acc[val.location], val] : [val];
  return acc
}, {}))

组件中有这样的东西吗？

const userItems = ({ item }) => {
 const users = Users.reduce((acc, val) => {
      acc[val.location] = acc[val.location] ? [...acc[val.location], val] : [val];
      return acc
    }, {})

    return (
     <>
      <ThemeProvider theme={ListItemTheme}>
         <View>
          {Object.keys(users).map((key) => (         
           <View style={styles.userContainer}>
             {users[key].map((user) => (
             <ListItem.Title key={user.id}>{key}</ListItem.Title>
             // >>>.....more user info stuff
             ))}
           </View>
           ))}   
         </View>
      </ThemeProvider>
    </>
    );
};

从数组中获取唯一值以用于 ListItem

Getting unique values from an Array for use in ListItem

javascript

arrays

unique

react-native