Question

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",
  },
]

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

我的useState

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) => {
    //???
  };

这是我的Return，其中我将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>
  );
};

请非常感谢您。

Answer 1

您要尝试的是正确的。

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

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

Answer 2

您可以像这样过滤对象（文件夹）的数组：

const filteredFolders = () => {
  return state.folders.filter(({ name }) =>
    name.toLowerCase().includes(state.search.toLowerCase())
  );
}

state.search来自输入。我created a sandbox正在使用演示

搜索对象数组

2 个答案: