从 json 文件中搜索和过滤数据 react native

Question

嗨，我正在开发一个使用 react native 构建的应用程序，问题是我有来自JSON文件的数据，我希望当用户输入他的名字时，这个名字会进入另一个屏幕，其中他的名字的含义是。 但我无法得到他名字中每个字母的对应字母。 示例： SO here Tag Is Handled The Searched 关键字

然后我将数据从另一个屏幕传递到它应该拆分关键字并将每个字母打印在单独的行中

这是 Json 格式的 DATA 文件

问题：如何获得每封信的通讯作者 DESC？ 谢谢

INPUTNAME.js

import React, { useState, useEffect } from 'react';
import { SafeAreaView, StyleSheet, FlatList } from 'react-native';
import { Text, Button, Layout, Divider, Icon} from '@ui-kitten/components';
import { ThemeContext } from '../../Components/theme-context';
import { Switch, TextInput } from 'react-native-paper';

import { SearchBar } from 'react-native-elements';

const InputNames = ({navigation}) => {
  const themeContext = React.useContext(ThemeContext);
  const [name, setName] = useState('');
  const shakeIconRef = React.useRef();
  const renderShakeIcon = (props) => (
    <Icon
      {...props}
      ref={shakeIconRef}
      animation='shake'
      name='shake'
    />
  );

    const navigateDetails = () => {
      navigation.navigate('GetDetails', {
        name: name
      });
    };
    const Shakeit = () => {
      shakeIconRef.current.startAnimation();
    }
    
  const onPress = () => {
    Shakeit();
    setTimeout(navigateDetails, 500);
    }
    const itemView = ({item}) => (
        <Text>
          {item.name}
        </Text>
      
    )
  
  return (
    <SafeAreaView style={{ flex: 1, flexDirection: 'column' }}>
      <Layout style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text category='h1' status='danger'>HALLO</Text>
        <TextInput
         
          style={styles.textIn}
          label=" Your name"
          textAlign='right'
          value={name}
          onChangeText={(text) => setName(text)}
        />

      
        <Button
        appearance='ghost'
        status='warning'
        style={styles.button}
        disabled={!name}
        accessoryLeft={renderShakeIcon}
        onPress={onPress}>
        DO it!
      </Button>
      </Layout>
     
    </SafeAreaView>
  );
};


export default InputNames

GETDETAILS.js

import * as React from 'react';
import { SafeAreaView, View, StyleSheet, FlatList } from 'react-native';
import { Divider, Icon, Layout, Text, TopNavigation, TopNavigationAction } from '@ui-kitten/components';
import { useRoute } from '@react-navigation/native';

const data =  [
{"text": "A", "desc" : "Some Description"},
]

const BackIcon = (props) => (
  <Icon {...props} name='arrow-back' />
);

const GetDetails = ({ navigation }) => {


  const navigateBack = () => {
    navigation.goBack();
  };

  const BackAction = () => (
    <TopNavigationAction icon={BackIcon} onPress={navigateBack}/>
  );


    const route = useRoute();
    
    const title = route.params.name.split('').join(` => \n`);
    const searchdesc = data.filter(function (item) {
      return item.text.includes(title);
    }).map(function ({text, desc}) {
      return {text, desc}
    })

   const renderItem = ({item, searchdesc}) => {
    return (
      <View>
        <Text>
          {item.text}{' => '}{item.desc} // Here where i want to show desc
        </Text>
      </View>
    )
   } 
    
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <TopNavigation title='Home' alignment='center' accessoryLeft={BackAction}/>
      <Divider/>
      <Layout style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text style={{marginTop: 22}} category='h1'>Details</Text>
        <Divider/>
        <Text category='h2' style={styles.nameInput}>{route.params.name}</Text>


        <Text>{title}</Text>
        <Divider/>
        
       
      </Layout>
     
   
    </SafeAreaView>
  )
};


export default GetDetails
const styles = StyleSheet.create({
  nameInput: {
    color: 'rgba(204, 14, 132, 0.9)',
    borderWidth: 2,
    borderColor: '#fff',
    marginTop: 20,
    borderRadius: 13,
    borderTopEndRadius: 14,
    padding: 18,
  }
})

Answer 1

你的意思是这样吗？

 //sample data const data = [ { text:"A", desc:"Amazing" }, { text:"N", desc:"Nice" }, { text:"O", desc:"Outstanding" }, ]; const descEachLetterOfYourName = (text) => { const arr = text.split(""); const newdata = arr.flatMap((item)=>{ const getFromData = data.filter((x)=>x?.text == item); console.log(getFromData); return getFromData.length > 0 ? getFromData : []; }) return newdata; } //put myname on state and render each item.text or item.desc const myname = descEachLetterOfYourName("ANON");