javascript - 如何在 FlatList 上没有该元素的情况下从数组中删除元素并更新状态?

标签 javascript reactjs react-native

我正在尝试从 FlatList 中删除数据,它从 JSON 文件 data.json 中呈现销售额 问题是,当我删除具有特定 ID 的销售并返回主页时,它会再次显示所有项目。那么我怎样才能从源中删除这些项目,并且这些项目将在应用程序的整个生命周期中被删除,直到用户关闭并再次重新打开? 任何帮助将不胜感激。

import data from './data.json';
{
    "sales": [
        {
            "id": 1,
            "amount": 100
        },
        {
            "id": 2,
            "amount": 200
        },
   ]
}
state = {
    data: data.sales
  }
  onPressRemove(id) {
    this.setState(
    prevState => {
      let data = prevState.data.slice();
      let newId = 0;
      for (var i=0; i < data.length; i++){
        if (data[i].id === id){
          newId = i;
        }
      }
      data.splice(newId, 1)
      return { data };
  });
}

最佳答案

这里的问题是,当您转到应用程序的另一部分时,该组件将UNMOUNT,当您返回该组件时,他将挂载并使用导入(数据。 JSON)。 对于这种问题,很多人选择用redux

另一种方法是将状态保留在父级上并将其作为该组件的 prop 提供,因此即使它将卸载并再次安装,它仍将保持 prop 不变(因为父级永不卸载)。

如果您在实现过程中有更多问题,如果您坚持实现我的答案,请随时评论/分享您的代码。

关于javascript - 如何在 FlatList 上没有该元素的情况下从数组中删除元素并更新状态?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59116829/

相关文章:

reactjs - 找不到图标react-fontawesome

javascript - JavaScript 或 AS3 中的 parseInt 返回错误值

javascript - 如何根据文本字段输入Reactjs获取完整的响应数据

javascript - 使用 JavaScript 在 HTML 中一次放置多个图像

javascript - ReactJS 中的过滤器嵌套对象

css - 我如何更改 react-native-element 搜索栏的外观

javascript - 第一次 TouchableOpacity 推送时从 FlatList 记录的数据为空

javascript - 二维数组状态

javascript - 弹出窗口显示时的 ArcGis 4.0 Javascript API 事件

javascript - CodeMirror:捕捉回车键防止换行