如何在本机反应中搜索映射列表答案

【问题标题】：How to search mapped list in react native如何在本机反应中搜索映射列表
【发布时间】：2021-03-07 22:55:22
【问题描述】：

我发现在 react native 中搜索映射列表非常困难。实际上，用 Flatlist 来做这件事对我来说很容易，但这真的让我很头疼。我希望有人能够帮助我。

所以，代码是这样的

import React, { Component, useState } from 'react';
import { Button,  Animated, Share, ScrollView,
  ImageBackground, StyleSheet, View} from "react-native";
import { Container, Header, Content, ListItem, Item, Input, Text, Icon, Left, Body, Right, Switch } from 'native-base';

const Auslawpart = ({ route, navigation}) => {
  const {parts, hereme} = route.params;
  const [search, setSearch] = useState('');
  const [filteredDataSource, setFilteredDataSource] = useState(parts);


 const filterSearch = (text) => {
    const newData = parts.filter((part)=>{
      const itemData = part.name.toUpperCase()
      const textData = text.toUpperCase()
      return itemData.indexOf(textData)>-1
    });
    setFilteredDataSource(newData);
      setSearch(text);
  }


 
  return (
    <Container>
    
   

     <Animated.View
      style={{
        transform:[
          {translateY:translateY }
        ],
        elevation:4,
        zIndex:100,
      }}
      >

<View style={{
       // marginTop:Constant.statusBarHeight,
       position:"absolute",
       
        top:0,
        left:0,
        right:0,
        bottom: 0,
        height: 50,
        backgroundColor:"#f0f0f0",
        borderBottomWidth: 1,
      borderBottomColor: '#BDC3C7',
        flexDirection:"row",
        justifyContent:"space-between",
        elevation: 4,
    }}>

    

      <View style={{margin: 10, flex: 1 }}>
         <TouchableOpacity  onPress={() => navigation.goBack()}>
        <Icon type="MaterialIcons" name="arrow-back" style={{ left: 10, }}
        size={50}  />
        </TouchableOpacity>
      </View>
      <View style={{
          
          justifyContent:"space-around",
          margin: 4,
flex: 1,
marginLeft:0,
         
      }}>


            
         <Text numberOfLines={3} style={{fontSize:10,
          alignSelf: 'flex-end',  color:"#212F3C", 
          padding: 2}}>{hereme}</Text>   
         
      </View>
   
    </View>

    </Animated.View>

    <Content style={{marginTop:50}}>
    
    <Item>
      <Icon type= "MaterialIcons" />
      <Input placeholder="Search legal terms and maxisms"
      onChangeText={(text) => filterSearch(text)}
       />
      <Icon type="Octicons" name="law" />
    </Item>

   
  
    
{parts.map((part) => (
  <TouchableOpacity
          key={part.name}
          
        >
<ListItem onPress={() =>
            navigation.navigate("Auslawcount", { 
              meaning: part.meaning, 
              partname: part.name})
          }>

              
<Icon type="Octicons"  name="law" />
<Body>
<Text onScroll={(e)=>{
          scrollY.setValue(e.nativeEvent.contentOffset.y) 
      }} style={{ fontSize: 17,  fontFamily: "Lato-Regular",}} key={part.name}>{part.name.toUpperCase()}</Text>
</Body>  
</ListItem>




</TouchableOpacity>

            ))}
            
            
            </Content>
</Container>
  );
};


export default Auslawpart;

part.name 中的数据从另一个屏幕传递到此屏幕。我尝试通过映射的 part.name 进行输入字段搜索。谁能帮我解决一下。

【问题讨论】：

标签： javascript arrays reactjs react-native react-native-flatlist

【解决方案1】：

这是一个例子

小吃：https://snack.expo.io/@ashwith00/bold-waffles


const data = [
  { name: 'Suleman' },
  { name: 'Sulan' },
  { name: 'Suljan' },
  { name: 'Ram' },
  { name: 'Raj' },
];

const Auslawpart = ({ route, navigation }) => {

const {} = route.params;
  const [filteredDataSource, setFilteredDataSource] = useState(parts);

  const filterSearch = (text) => {
    if (text.length > 0) {
      const newList = data.filter((part) => {
        const name = part.name.toUpperCase();
        const textData = text.toUpperCase();
        return name.includes(textData);
      });
      setFilteredDataSource(newList);
    } else {
      setFilteredDataSource(parts);
    }
  };

  return (
    <View>
      <TextInput placeholder="Enter here" onChangeText={filterSearch} />
      <ScrollView>
        {filteredDataSource.map((item, i) => (
          <Text key={i} style={{ paddingVertical: 30 }}>
            {item.name}
          </Text>
        ))}
      </ScrollView>
    </View>
  );
};

【讨论】：

好的！我明白了。但这是一个平面列表。有没有一种方法可以对我给出的示例中的映射列表项执行相同的操作。请...
非常感谢 Ashwith Saldanha。但是如果数据是从另一个屏幕传递过来的。我该怎么办？在我的例子中，零件是通过反应导航从另一个屏幕传递到这个屏幕的。
用参数中的部分替换数据
ERROR TypeError: undefined is not an object (evalating 'parts.name.toUpperCase')
我收到此错误。请您再次更新代码。非常感谢