React本机Javascript搜索数组

我试图通过

name

和

components

搜索

数组

，但我确实没有做到。这是我第一次使用Search和React Native以及javascript的基本知识。有人能帮帮我吗。我得到一个空数组

这是当数据位于控制台时的一个示例。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;

import React，{useState}来自“React”；
从“react native elements”导入{SearchBar}；
const SearchScreen=（道具）=>{
const[searchDetails，setSearchDetails]=useState（）；
const[data，setData]=useState（[]）；
const recipes=props.navigation.getParam（'recipes'）
console.log（食谱）
const searchFilterFunction=（文本）=>{
setSearchDetails（文本）
const newData=recipes.filter(
item=>{item.name==text}
)
setData（新数据）
}
console.log（数据）
返回(
searchFilterFunction（文本）}
值={searchDetails}
/>
);
};
导出默认搜索屏幕；

这是您的应用程序的简化版本

你可以看看这个例子

import React，{useState}来自“React”；
从“react native”导入{视图、样式表、文本}
从“react native elements”导入{SearchBar}；
constyles=StyleSheet.create（{}）；
const recipes=[‘鸡肉’、‘土豆’、‘汉堡’]；
const SearchScreen=（道具）=>{
const[searchDetails，setSearchDetails]=useState（“”）；
const[data，setData]=使用状态（配方）；
const searchFilterFunction=（文本）=>{
const newData=recipes.filter（item=>item.includes（text.toLowerCase（）））
setData（新数据）
}
返回(
searchFilterFunction（文本）}
value={text=>setSearchDetails（text）}
/>
{data.map（text=>{text}}
);
};
导出默认搜索屏幕；

这是按

名称和
成分搜索数据的功能

const searchFilterFunction=（searchTerm）=>{
如果（搜索术语）{
setSearchDetails（搜索术语）；
const newData=foods.filter（{name，components}）=>{
if（RegExp（searchTerm，“gim”）.exec（name））
返回RegExp（searchTerm，“gim”）.exec（名称）；
其他的
返回成分。筛选器（{val}）=>
RegExp（searchTerm，“gim”）.exec（val）
).长度；
});
setData（newData）；
}否则{
setData（[]）；
}
};

此函数将首先按名称搜索食品，如果没有匹配项，则搜索成分我已经测试过这个函数，这个函数可以工作了
你能创建一个吗？出于某种原因，它会呈现一个空列表
const newData=recipes.filter（item=>item.name==text）
尝试这样做吗？但它不会进入新数组，甚至不会搜索到元素。请告诉我我根本不知道我在做什么。嗨，谢谢你的回答。你能将配方更改为对象数组吗？因为这是我发现的困难。你可以在此处插入数组并更改搜索函数
const newData=recipes.filter（item=>item.text.toLowerCase（）.includes（text.toLowerCase（））
类似的东西哇，非常感谢你的回答这正是我想要做的。我如何编辑此代码以仅显示搜索结果，而不是在搜索任何内容之前显示所有食物。再次感谢你的回答
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;