Javascript 在React Native Flatlist中添加搜索栏没有响应

在我的React原生应用程序中，我希望能够搜索和显示歌曲，我已经尝试实现了搜索功能，但似乎都不起作用。下面的代码只允许我键入一个字母，当我键入一个字母时，我的android设备键盘消失，我的列表仍将保留（不会触发搜索）

请我需要帮助使搜索功能正常工作，以便在用户搜索歌曲时显示我的搜索歌曲

这是我的球员名单代码：

import React，{useffect，useState}来自“React”；
导入{
安全区域视图，
看法
平面列表，
滚动视图，
可触摸不透明度，
活动指示器，
文本输入，
}从“反应本机”；
从“react native Sound”导入声音；
从“@ui kitten/components”导入{Avatar，Text}”；
从“反应本机向量图标/离子图标”导入离子图标；
从“lodash.filter”导入过滤器；
从“../../SongData”导入歌曲；
从“./styles”导入样式；
const SonglistScreen=（）=>{
const[isDisabled，setisDisabled]=useState（false）；
const[loading，setLoading]=useState（false）；
const[isPlayed，setIsPlayed]=使用状态（false）；
const[data，setData]=useState（[]）；
const[query，setQuery]=useState（“”）；
const[song，setSong]=useState（[]）；
const[fullData，setFullData]=useState（[]）；
useffect（（）=>{
getData（）；
}, []);
常量getData=（）=>{
const res=（歌曲）；
setData（res）；
setFullData（res）；
};
.....//
......//
常量renderItem=（{item，index}）=>(
{item.title}
{item.ArtistName}
流派：{item.Genre}
播放声音（项目、索引）}
样式={{填充：10，顶部：30，左侧：30}}
>
停止声音（索引）}
样式={{填充：10，顶部：30，左侧：20}}
>
);
const handleSearch=text=>{
让newData=songs.filter（项=>{
const itemData=`${item.title.toUpperCase（）}`；
const textData=text.toUpperCase（）；
如果（text.length>0）{
返回itemData.indexOf（textData）>-1；
}
});
setData（newData）；
设置查询（文本）；
};
const renderHeader=（）=>{
返回(
handleSearch（文本）}
占位符=“搜索歌曲”
风格={{背景颜色：'#fff'，填充水平：20}}
/>
)
};
常量renderFooter=（）=>{
如果（！加载）返回null
返回(
);
}
...../
...../
返回(
项目id}
ItemSeparatorComponent={renderSeparator}
ListHeaderComponent={renderHeader}
ListFooterComponent={renderFooter}
/>
);
}

因此，这里的问题是，所有内容都在同一个组件内，当您运行

setData

或

setQuery

时，您会更新整个组件，并重置键盘

关于您的列表未更新，您的代码似乎有一个小错误：

return (
  <SafeAreaView style={styles.container}>
    <FlatList
      // data={songs} <-- here you should be using data
      data={data} // something like this
      renderItem={renderItem}
      keyExtractor={item => item.id}
      ItemSeparatorComponent={renderSeparator}
      ListHeaderComponent={renderHeader}
      ListFooterComponent={renderFooter}
    />
  </SafeAreaView>
);

为此：

const [data, setData] = useState(songs);

好的，这应该可以解决列表中没有筛选器的问题，因为现在您将使用在筛选函数中设置的变量，但是在每次文本更改时更新整个组件时，键盘关闭的问题将继续发生。 在我看来，这里有一个很好的解决方案：

使用某种全局状态管理（例如：Context或Redux，您也可以使用mobx实现此解决方案），通过这种方式，您可以创建一个名为

的独立组件，并将查询更新放在那里，并更新全局状态上的列表值，这不会导致组件完全重新加载，只是列表会更新，您可以保持字段焦点，也许这对您来说是一个新概念，所以我在这里使用上下文分享一个示例：

工作示例：

静态代码：

import React，{useContext，useState}来自“React”；
从“react native”导入{Text，View，FlatList，TextInput}；
常数数据=[
{name:“qweqwe”}，
{名称：“AAAAA”}，
{name:“eeeeeee”}，
{名称：“4”}
];
//列表上下文和列表提供程序可以在同一个文件中同时存在
const ListContext=React.createContext({
名单：[]，
集合列表：（）=>{}
});
常量ListProvider=（{children}）=>{
const[list，setList]=useState（数据）；
返回(
{儿童}
);
};
常量项=（{Item}）=>{
返回(
{item.name}
);
};
常量头=（）=>{
const[text，setText]=useState（“”）；
const listContext=useContext（listContext）；
const updateQuery=（str）=>{
setList（data.filter（（d）=>d.name.indexOf（str）>-1））；
setText（str）；
};
返回(
);
};
常量列表屏幕=（）=>{
返回(
{（上下文）=>(
i、 名称}
renderItem={（{item}）=>}
ListHeaderComponent={Header}
/>
)}
);
};
常量应用=（）=>{
返回(
);
};
导出默认应用程序；

---

祝您的项目成功。

之所以会这样，是因为在执行setdata后，Flatlist会重新渲染。您可能希望将搜索输入排除在平面列表之外。非常感谢Luis，您的解决方案成功了。但是我在App.js中的ListContext.Provider有问题，因为我显示列表的主代码在不同的文件中，我只是使用App.js来显示屏幕。很高兴知道代码的帮助，你可以将de Provider放在App.js上，只需在代码中的任何地方使用

消费者

，你也不必把状态管理放在App.js上，我会更新我的答案，让它使用另一个组件作为状态管理，也许这可以帮助你在你的项目上实现。好的，我已经更新了代码示例，现在你有了

ListProvider

它是一个负责处理上下文的组件，哟

const [data, setData] = useState(songs);