React原生Javascript搜索数组

Question

我试图搜索一个Array由name和ingredients，但我真的失败了。这是我第一次使用本机搜索和反应，以及我在javascript中的基本知识。有人能帮帮我吗。我得到了一个空数组。

这是数据为console.log时的一个示例。

Array [
    Object {
      "id": "VpcupAWap8RRIbLSt0ZuleCh2C22",
      "ingridients": Array [
        Object {
          "id": 1598773734254,
          "val": '3 ½ cups tomato sauce (800 g)'
        },
        Object {
          "id": 1598773734154,
          "val": '1 large onion, finely chopped'
        },
        Object {
          "id": 1598773734154,
          "val": '8 cloves garlic, minced'
        },
      ],
      "name": "Chicken Sandwich",
    },
]

这是我的密码：

import React, { useState } from "react";
import { SearchBar } from "react-native-elements";

const SearchScreen = (props) => {
    const [searchDetails, setSearchDetails] = useState();
    const [data, setData] = useState([]);
    const recipes = props.navigation.getParam('recipes')

    console.log(recipes)
    const searchFilterFunction=(text)=>{
        setSearchDetails(text)
        const newData = recipes.filter(
            item => { item.name === text}
        )
        setData(newData)
        }
        console.log(data)
    return (
        <View style={styles.container}>
            <SearchBar
                placeholder="Type Here..."
                onChangeText={(text) => searchFilterFunction(text)}
                value={searchDetails}
            />
        </View>
    );
};

export default SearchScreen;

Answer 1

下面是通过name和ingredients搜索数据的函数

const searchFilterFunction = (searchTerm) => {
  if (searchTerm) {
    setSearchDetails(searchTerm);
    const newData = foods.filter(({ name, ingredients }) => {
      if (RegExp(searchTerm, "gim").exec(name))
        return RegExp(searchTerm, "gim").exec(name);
      else
        return ingredients.filter(({ val }) =>
          RegExp(searchTerm, "gim").exec(val)
        ).length;
    });

    setData(newData);
  } else {
    setData([]);
  }
};

此功能将首先搜索食品的名称，如果没有匹配，然后它搜索的成分。我已经测试过这个功能了，这个函数可以工作

Answer 2

这里是你的应用程序的简化版本。

您可以检查示例这里

import React, { useState } from "react";
import { View, StyleSheet, Text } from 'react-native'
import { SearchBar } from "react-native-elements";

const styles = StyleSheet.create({});

const recipes = ['chicken', 'potato', 'burger'];

const SearchScreen = (props) => {
    const [searchDetails, setSearchDetails] = useState('');
    const [data, setData] = useState(recipes);

    const searchFilterFunction=(text)=>{
        const newData = recipes.filter(item => item.includes(text.toLowerCase()))
        setData(newData)
    }


    return (
        <View style={styles.container}>
            <SearchBar
                placeholder="Type Here..."
                onChangeText={(text) => searchFilterFunction(text)}
                value={text => setSearchDetails(text)}
            />
            <View>
            {data.map(text => <Text>{text}</Text>)}
            </View>
        </View>
    );
};

export default SearchScreen;