Javascript 如何在FLatList react native中实现Sraech bar

我试图在FlatList中添加搜索栏，这里从API获取数据并填充到FlatList中，但我必须过滤该列表，因为它可能包含许多数据。所以请帮我。我尝试了几个例子，但出现了一些错误，所以有时什么都没有发生。请看一看并提供帮助

 import React, { Component } from 'react';
    import { View, Text, TextInput,   
    FooterTab,Button,TouchableOpacity, ScrollView, StyleSheet,
     ActivityIndicator ,Header,FlatList} from 'react-native';
     import {Icon} from 'native-base';
    import { createStackNavigator } from 'react-navigation';  
    import { SearchBar } from 'react-native-elements';   

  export default  class RenderList extends Component {
  static navigationOptions = {
    title: 'Selected Item',
    header: null,
  };
  constructor() {
    super();
    this.state = {
      data: null,
      loading: true,
      search: '',
    };
  }

  componentDidMount() {
    this.createViewGroup();
  }

  createViewGroup = async () => {
    try {
      const response = await fetch(
        'http://Dsenze/userapi/grouphier/viewgroup',
        {
          method: 'POST',
          headers: {
            Accept: 'application/json',
            'Content-Type': 'application/json',
          },
          body: JSON.stringify({
            password: 'admin',
            username: 'admin',
            viewall: 'false',
            id: [4],
            startlimit: '0',
            valuelimit: '10',
          }),
        }
      );

      const responseJson = await response.json();

      const { groupData } = responseJson;

      this.setState({
        data: groupData,
        loading: false,
      });
    } catch (e) {
      console.error(e);
    }
  };

  clickedItemText(clickedItem) {
    this.props.navigation.navigate('Item', { item: clickedItem });
  }
  updateSearch = search => {
    this.setState({ search });
  };
  keyExtractor = ({ id }) => id.toString();
  keyExtractor = ({ name }) => name.toString();

  renderItem = ({ item }) => (
    <TouchableOpacity
      style={styles.item}
      activeOpacity={0.4}
      onPress={() => {
        this.clickedItemText(item);
      }}>
      <Text>Hospital Id {item.id}</Text>
      <Text>Hospital Name {item.name}</Text>
    </TouchableOpacity>
  );

  renderSeparator = () => {
    return (
      <View
        style={{
          height: 1,
          width: "86%",
          backgroundColor: "#CED0CE",
        }}
      />
    );
  };


  render_FlatList_header = () => {

    var header_View = (

    <View style={styles.header_footer_style}>

      <Text style={styles.textStyle}> FlatList Header </Text>

    </View>

    );

    return header_View ;

  };

  render() {
    const { loading, data } = this.state;


    return (
      <ScrollView>
        <View style={styles.container1}>

          {this.state.loading ? (
            <ActivityIndicator size="large" />

          ) :

          (
            <FlatList 
              data={data}
              renderItem={this.renderItem}
             keyExtractor={this.keyExtractor}
             ItemSeparatorComponent={this.renderSeparator}
             ListHeaderComponent={this.render_FlatList_header}

            />
          )}
        </View>
      </ScrollView>
    );
  }
}  

import React，{Component}来自'React'；
导入{视图，文本，文本输入，
FooterTab、按钮、TouchableOpacity、ScrollView、样式表、，
ActivityIndicator，Header，FlatList}来自“react native”；
从“本机基”导入{Icon}；
从“反应导航”导入{createStackNavigator}；
从“react native elements”导入{SearchBar}；
导出默认类RenderList扩展组件{
静态导航选项={
标题：“所选项目”，
标题：null，
};
构造函数（）{
超级（）；
此.state={
数据：空，
加载：对，
搜索：“”，
};
}
componentDidMount（）{
这是createViewGroup（）；
}
createViewGroup=async（）=>{
试一试{
const response=等待获取(
'http://Dsenze/userapi/grouphier/viewgroup',
{
方法：“POST”，
标题：{
接受：'application/json'，
“内容类型”：“应用程序/json”，
},
正文：JSON.stringify({
密码：“admin”，
用户名：“admin”，
viewall:'假'，
身份证号码：[4]，
startlimit:'0'，
valuelimit:'10'，
}),
}
);
const responseJson=wait response.json（）；
const{groupData}=responseJson；
这是我的国家({
数据：groupData，
加载：false，
});
}捕获（e）{
控制台错误（e）；
}
};
单击编辑文本（单击编辑文本）{
this.props.navigation.navigate（'Item'，{Item:clickedItem}）；
}
updateSearch=搜索=>{
this.setState（{search}）；
};
keyExtractor=（{id}）=>id.toString（）；
keyExtractor=（{name}）=>name.toString（）；
renderItem=（{item}）=>(
{
点击编辑文本（项目）；
}}>
医院Id{item.Id}
医院名称{item.Name}
);
RenderParator=（）=>{
返回(
);
};
渲染平面列表标题=（）=>{
变量头\u视图=(
平面列表标题
);
返回页眉视图；
};
render（）{
const{loading，data}=this.state；
返回(
{this.state.loading(
) :
(
)}
);
}
}  

---

谢谢…

所以您需要保留数据的原始值，然后您可以根据关键输入对其进行过滤，并将状态设置为显示在平面列表中。 例如，如果输入时更改文本，则过滤对象的匹配子字符串，并将其放入新数组中，然后将其设置为将显示在平面列表中的

filterByValue

数组

onSearchInputChange = (text) => {
    const filterByValue = this.state.data.filter(x => 
     x.name.toLowerCase().includes(text.toLowerCase()));
    this.setState({
      searchText: text,
      filterByValue
    });
  }

然后将flatlist的数据作为

<FlatList 
   data={filterByValue}
   renderItem={this.renderItem}
   keyExtractor={this.keyExtractor}
   ItemSeparatorComponent={this.renderSeparator}
   ListHeaderComponent={this.render_FlatList_header}
/>

例如，试试这个

---

如果您在我编写的代码中添加一个工作副本就太好了，因为数据将出现在平面列表中。。api和数据都在工作，长官。。你的意思是我将把代码放在snack.expo.io中？是的，这将很容易调试。好的，当然。对不起，还有一个问题。。我会感谢你：）