内存泄漏,带有一个简单的平面列表和一个搜索栏

7rfyedvj  于 2021-09-13  发布在  Java
关注(0)|答案(0)|浏览(231)

我面临着这个问题

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,这样它就不会记录我在搜索栏中点击的每个字符。
如果有人知道为什么会出现这个错误消息(为什么我会有记忆障碍),我的日子会很安全。。谢谢!

暂无答案!

目前还没有任何答案,快来回答吧!

相关问题