在React Native中使用JSON数据显示搜索输出

普拉泰克·绍里娅

我处于学习本机的非常原始的阶段。我正在尝试解决一个听起来很愚蠢的简单问题，但我真的很想知道答案。

我有一个json文件

data.js

export const PRODUCT_DATA = [
    {
        name: 'abc',
        price: 90,
        weight: '1 kg',
        currency: 'INR',
        liked: true,
        image: require('../assets/images/carrots/Rectangle238.png')
    },
    {
        name: 'bce',
        price: 10,
        weight: '1 kg',
        currency: 'USD',
        liked: false,
        image: require('../assets/images/mango/Rectangle234.png')
    },
    {
        AllCategoriesComponent: [
            {
                icon: "home-outline",
                name: "Household",
                shape: true,
            },
            {
                icon: "basket-outline",
                name: "Grocery",
                shape: false,
            },
            {
                icon: "ios-podium",
                name: "Milk",
                shape: true,
            },
            {
                icon: "ios-rose",
                name: "chilled",
                shape: false,
            },
            {
                icon: "hardware-chip",
                name: "Drinks",
                shape: true,
            },
            {
                icon: "cloud",
                name: "Pharmacy",
                shape: true,
            },
            {
                icon: "fast-food",
                name: "Frozen Food",
                shape: true,
            },
            {
                icon: "football",
                name: "Vegetable",
                shape: true,
            },
            {
                icon: "bulb",
                name: "Meat",
                shape: true,
            },
            {
                icon: "football",
                name: "Vegetable",
                shape: true,
            },
            {
                icon: "bulb",
                name: "Meat",
                shape: true,
            },
        ]
    },
    
];

以下是屏幕文件

screen.js

import { SearchBar } from 'react-native-elements';
import { Text, View, TextInput } from 'react-native';
import React from 'react';
import { PRODUCT_DATA } from "./data";

export default class App extends React.Component {
    constructor() {
        super();
        this.state = {
            search: '',
        }
    }

    updateSearch = (search) => {
        this.setState({ search: search });
    };
    render() {
        const { search } = this.state;
        return (
            <View>
                <SearchBar onChangeText={this.updateSearch} value={search} />
                {PRODUCT_DATA[2].AllCategoriesComponent.map((item, index) => {
                    if (item.name === this.state.search) {
                        return (
                            <View style={{ backgroundColor: "white" }}>
                                <Text>{search}</Text>
                            </View>
                        );
                    } else {
                        return (<Text></Text>);
                    }
                })}
                <Text>{this.state.search}</Text>
            </View>
        );
    }
}

如您所见，这不是一个好的解决方案。只有在中输入全名时，我才能打印输出SearchBar。此外，似乎所有内容item.name都已显示在屏幕上，当搜索栏的值与之匹配时就会出现。我想在输入内容后立即开始显示输出SearchBar

努鲁丁·拉哈尼（Nooruddin Lakhani）

这可能有帮助，请调查一下

import { FlatList, Text, View, TextInput } from "react-native";

export default class Example extends Component {
  constructor(props) {
    super(props);

    this.state = {
      text: "",
      data: [],
    };

    this.arrayholder = [];
  }

  componentDidMount() {
    const data = PRODUCT_DATA[2].AllCategoriesComponent.map((item, index) => {
      return item;
    });
    this.setState({ data }, () => {
      this.arrayholder = data;
    });
  }

  searchData(text) {
    const newData = this.arrayholder.filter((item) => {
      const itemData = item.name.toUpperCase();
      const textData = text.toUpperCase();
      return itemData.indexOf(textData) > -1;
    });

    this.setState({
      data: newData,
      text: text,
    });
  }

  render() {
    return (
      <View style={styles.MainContainer}>
        <TextInput
          onChangeText={(text) => this.searchData(text)}
          value={this.state.text}
          placeholder="Search Here"
        />

        <FlatList
          data={this.state.data}
          keyExtractor={(item, index) => index.toString()}
          renderItem={({ item }) => <Text style={styles.row}>{item.name}</Text>}
        />
      </View>
    );
  }
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。