时间戳

首页 > 解决方案 > 尝试在 React Native 中更新 useState 数组中的某些字段

arrays - 尝试在 React Native 中更新 useState 数组中的某些字段

问题描述

我试图从 SQLite 数据库中取回数据行，然后遍历它们，以便我可以操纵每一行的数据以不同的方式呈现它们（即，将日期转换为自定义格式）。

带回数据很好（来自 ReadEntries 函数），我在 useEffect 中执行此操作，以便它只在屏幕加载时运行一次，但复制数组然后更新行似乎不起作用。我认为这可能与设置 useState 数组的值不够快以更新我的重复数组然后对其进行完整快照的事实有关。

当我在 VS Code 中多次保存时，它有时会起作用，大概是因为状态已经存储以供后续屏幕刷新。

useEffect(() => {
    var results: SQLite.ResultSetRowList;   
    const response = async (): Promise<any> => {
      await ReadEntries(projectID).then((value) => {
        results = value as SQLite.ResultSetRowList;
        setEntries(results.raw); //this works
        let newEntries = [...entries];      
        for (let i = 0; i < newEntries.length; i++) {
          let newStartDate = new Date(newEntries[i].startDate);
          newEntries[i].dateOfEntry = newEntries[i].dateOfEntry;
          newEntries[i].startDate =
            newStartDate.getDate().toString() +
            "/" +
            newStartDate.getMonth().toString() +
            "/" +
            newStartDate.getFullYear().toString();
        }
       setEntries(newEntries);
      });
    };
    response().catch((error) => {
      "ERROR: " + error;
    });
  }, []);

谢谢

标签： arraysreactjsreact-nativeuse-state

解决方案

带有钩子的状态更新不仅是异步的，而且还受闭包的约束。您不应回复更新的状态以触发同一函数调用中的另一个更改

查看这篇文章以获取更多详细信息：useState set method not reflection change immediate

您可以利用获取的数据来执行操作

useEffect(() => {
    var results: SQLite.ResultSetRowList;   
    const response = async (): Promise<any> => {
      await ReadEntries(projectID).then((value) => {
        results = value as SQLite.ResultSetRowList;
        setEntries(results.raw); // This shouldn't be required.
        let newEntries = [...results.raw]; // use results instead of entries      
        for (let i = 0; i < newEntries.length; i++) {
          let newStartDate = new Date(newEntries[i].startDate);
          newEntries[i].dateOfEntry = newEntries[i].dateOfEntry;
          newEntries[i].startDate =
            newStartDate.getDate().toString() +
            "/" +
            newStartDate.getMonth().toString() +
            "/" +
            newStartDate.getFullYear().toString();
        }
       setEntries(newEntries);
      });
    };
    response().catch((error) => {
      "ERROR: " + error;
    });
  }, []);

推荐阅读