React Native Search Closing After Each Key Stroke

Question

我有一个搜索栏，它会命中传入搜索键的API(还使用debounce来调节调用(，并返回要传递到状态的数据，并使用该状态数组来填充我的flatlist。

去抖动代码：

const debouncedFetchData = debounce((query, cb) => {
fetchData(query, cb);
}, 300);
const fetchData = async (query, cb) => {
returnUnSortedWorkouts(query).then(items => {
cb(items);
});
};

搜索触发代码：

useEffect(() => {
debouncedFetchData(searchKey, d => {
const groups = d.map(y => ({
id: y.id,
name: y.name,
thumbnail: y.thumbnail,
}));
setDataSet(groups);
setsearching(false)
});
}, [searchKey]);

搜索栏和平面列表：

<SearchBar
onChangeText={e => {setSearchKey(e), setsearching(true)}}
autoFocus
defaultValue={searchKey}
style={[
{
width: '100%',
},
tailwind('my-2'),
]}
/>
</View>
{!searching && (
<FlatList
style={{ width: '100%' }}
data={dataSet}
keyExtractor={(item, index) => {
return index;
}}
renderItem={({ item, index }) => {
return (
<View style={tailwind(`mt-[7px]`)}>
//custom component 
<RecommendedWorkout
navigation={navigation}
id={item.id}
// (other info not added)
/>
</View>
);
}}
/>
)}

我很乐意添加任何其他上下文来帮助理解动态。我的猜测是这种状态导致了重新渲染，但我不知道如何阻止这种情况。

Answer 1

要修复，我需要移动

<SearchBar
onChangeText={e => {setSearchKey(e), setsearching(true)}}
autoFocus
defaultValue={searchKey}
style={[
{
width: '100%',
},
tailwind('my-2'),
]}
/>

功能之外。