时间戳

首页 > 解决方案 > React Native 如何编辑和更新数组数据

javascript - React Native 如何编辑和更新数组数据

问题描述

我是 React Native 的新手。我一直在尝试将数据编辑到现有的数组数据文件中。让我们更清楚。我有一个数据文件名 testData.js。数据看起来像这样

const TestRoomData=[
    {
        id:"001",
        date:"24-April-2020",
        diagnosis: "seasonal flue",
        result:"this is some details on the result",
        prescription:"tamiflu",
        key: "33325254",
    },
    {   
        id:"002",
        date:"22-April-2020",
        result:"this is some details on the result editable",
        diagnosis: "Arthritis",
        prescription:"tamiflu",
        key: "33325255",
    }
];
module.exports= TestRoomData;

所以我通过简单地导入数据来通过平面列表显示数据。有什么方法可以通过 textInput 对这个数据列表进行一些更改？在我的 flatList 中，它有一个导航到编辑屏幕的按钮。在编辑屏幕中，文本输入很少。我了解如何在屏幕之间传递数据，并且能够将其作为占位符传递。我想要的只是改变 TestRoomData 。

您能否详细说明在我的场景中仅编辑数据的过程？

我还有很长的路要走，非常感谢一点帮助。谢谢你

标签： javascriptarraysreact-native

解决方案

您可以在运行时修改测试数据数组，但如果您不将它们保存在某处，您将无法持久保存这些更改。

做就是了：


// Change it to "let" as it is not a constant variable.
let objTestData = [
    {
        abc: 1,
        def: 2
    },
    {
        abc: 2,
        def: 3
    }
];


function addToTestData(obj) {
    objTestData.push(obj)
}

module.exports = {
    objTestData,
    addToTestData
}

然后，导入“addToTestData”方法

import React, { Component } from 'react';
import { addToTestData } from './testData.js'

class MyComponent extends Component {
     //...

     myMethod = (obj) => addToTestData(obj)

     //...
}

您不能直接修改测试数据数组，因为在 ES6 中，导入是导出值的只读实时视图。相反，您应该使用可以访问该数组的导入方法来修改该数组。

注意请注意，这些更改在应用程序重新启动后不会持续存在。如果您希望数据持久化，您应该使用一些数据存储解决方案作为AsyncStorage

推荐阅读