时间戳

首页 > 解决方案 > 搜索对象数组

javascript - 搜索对象数组

问题描述

Imagen 如果我有一个对象数组 - id 和 value。现在数组是空的 Array []。但是，只要用户键入并添加名称，就会被派上用场。如果用户键入 Anna、Pedro 和 Joana，则数组将更新为

    Array [
  Object {
    "id": "0.265247357395923",
    "value": "Anna",
  },
  Object {
    "id": "0.07416445026556007",
    "value": "Pedro",
  },
  Object {
    "id": "0.9097178194832282",
    "value": "Joana",
  },
]

我的任务是添加一个搜索栏，我可以在其中搜索数组内的对象值。到目前为止，这是我的代码。

我的使用状态

const [folder, emptyFolder] = useState([]);
const [searchTerm, setSearchTerm] = useState("");

我的名字

const addFolder = (folderName) => {
    emptyFolder((currentFolder) => [
      ...currentFolder,
      { id: Math.random().toString(), value: folderName },
    ]);
  };

我的搜索。到目前为止，这是我想要实现我的代码的地方，这是我能够做到的：

const filteredData = folder.filter((item) => {
    const textData = searchTerm.toUpperCase();
    const nameFolder = item.value.toUpperCase();
    return nameFolder.includes(textData);
  });

  const _searchFilterFunction = (value) => {
    //???
  };

这是我的返回，其中我有 TextInput 作为我的搜索栏和 {filteredData.map((item, index) => { return {item.value}; })} 每次用户创建时显示我的名单。

return (
    <View style={styles.HomeContainer}>
      <TextInput
        underlineColorAndroid="transparent"
        autoCapitalize="none"
        placeholderTextColor="#9a73ef"
        style={styles.search}
        placeholder="Search"
        onChangeText={(value) => {
          _searchFilterFunction(value, folder);
        }}
      />
      <FolderInput myFolder={addFolder} />

      {filteredData.map((item, index) => {
        return <Text key={item.id}>{item.value}</Text>;
      })}
    </View>
  );
};

请帮助非常感谢。

标签： javascriptreact-nativereact-hooks

解决方案

你正在尝试的是，正确的。

const filteredData = folder.filter((item) => {
    const textData = searchTerm.toUpperCase();
    const nameFolder = item.value.toUpperCase();
    return (nameFolder.indexOf(textData) >= 0)
});

includes用于带有字符串的数组，但实际上您是在比较字符串吗？因此，如果您的搜索字符串是对象项的子字符串，您可以使用indexOf它将返回。true

推荐阅读