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

Question

Hi我正在开发一个使用react native构建的应用程序，问题是我有来自JSON文件的数据，我希望当用户输入他的名字时，这个名字会进入另一个屏幕，在这个屏幕上，他的名字的含义是什么。但我找不到他名下每个字母的对应字母。示例：所以这里的标签是处理的搜索关键字

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

这是Json格式的数据文件

问题：如何获得每个信件的通讯员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");