我面临着这个问题
Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
当我录制一个角色并直接在搜索栏中删除它时。我从一个json变量获取数据,所以所有东西都在设备上。我没有做任何api调用。
我正在像这样导入数据 import foodData from "../config/foodData";
在fooddata变量中,它确实是这样的:
export default foodData = [
{
id: "10533",
title: "Agar Agar",
category: "Verschiedenes/Gelier- und Bindemittel",
kcal: "160",
protein: "2.4",
carbohydrates: "0",
fat: "0",
},
{
id: "10536",
title: "Agavensirup",
synonym: "Agavendicksaft",
category: "Süssigkeiten/Zucker und Süssstoffe",
kcal: "295",
protein: "0.2",
carbohydrates: "73",
fat: "0",
},
{
id: "1478",
...
我在这个选项卡中有大约900个对象。
最后,我的带有搜索栏和平面列表的组件如下所示:
import React, { useState } from "react";
import {
View,
StyleSheet,
TextInput,
ScrollView,
FlatList,
TouchableHighlight,
} from "react-native";
import AppText from "../components/AppText";
import CardFood from "../components/CardFood";
import Screen from "../components/Screen";
import colors from "../config/colors";
import foodData from "../config/foodData";
import _ from "lodash";
function AddFoodScreen(props) {
const [data, setData] = useState([]);
const [fulldata, setFullData] = useState([foodData]);
const title = props.route.params.title;
const test = foodData.map((food) => {
return <AppText key={food.id}>{food.title}</AppText>;
});
const renderSeparator = () => (
<View
style={{
backgroundColor: "#3E405A",
height: 0.4,
width: "80%",
alignSelf: "center",
}}
/>
);
const handleSearch = _.debounce((text) => {
console.log(text);
const filteredData = foodData.filter((filteredFood) => {
if (filteredFood.title.toLowerCase().includes(text.toLowerCase())) {
return true;
} else if (
filteredFood.synonym &&
filteredFood.synonym.toLowerCase().includes(text.toLowerCase())
) {
return true;
} else {
return false;
}
});
setData(filteredData);
}, 500);
return (
<Screen>
<View style={styles.containerSearchBar}>
<TextInput
clearButtonMode={"while-editing"}
autoCorrect={false}
style={styles.searchInput}
placeholder="Nahrungsmittel suchen.."
placeholderTextColor="white"
onChangeText={(text) => handleSearch(text)}
/>
</View>
<View style={styles.container}>
<FlatList
contentContainerStyle={{ padding: 20 }}
data={data}
ItemSeparatorComponent={renderSeparator}
keyExtractor={(data) => data.id.toString()}
renderItem={({ item }) => {
return (
<CardFood
title={item.title}
kcal={item.kcal}
carbohydrates={item.carbohydrates}
protein={item.protein}
fat={item.fat}
style={{
width: "100%",
height: 100,
}}
onPress={() =>
props.navigation.navigate("FoodDetails", {
...item,
newTitle: title,
})
}
/>
);
}}
/>
</View>
</Screen>
我还使用了lodash,以便在我的handlesearch中使用debounce,这样它就不会记录我在搜索栏中点击的每个字符。
如果有人知道为什么会出现这个错误消息(为什么我会有记忆障碍),我的日子会很安全。。谢谢!
暂无答案!
目前还没有任何答案,快来回答吧!