React Native 更新深度嵌套的JSON时不触发useEffect

ca1c2owp  于 2023-06-24  发布在  React
关注(0)|答案(1)|浏览(179)

大家好,我是一个初学者,这个问题困扰了几个小时,所以我正在使用深度嵌套的JSON,每当我更新JSON树深处的值时,useEffect钩子无法识别它,我该怎么做??
下面是我的代码流,所以要更新的值我用这个函数得到它的路径

function findValuePath(data, targetValue, currentPath = "") {
    if (typeof data === "object" && data !== null) {
      for (let key in data) {
        const path = currentPath ? `${currentPath}.${key}` : key;
        if (data[key] === targetValue) return path;
        const result = findValuePath(data[key], targetValue, path);
        if (result) return result;
      }
    }
  }

一旦我有了值路径,我就更新嵌套json中的orderSubstatus

function updateNestedJSON(json, path, value) {
    const keys = path.split(".");
    let current = json;

    for (let i = 0; i < keys.length - 1; i++) {
      const key = keys[i];
      if (!current[key]) {
        current[key] = {};
      }
      current = current[key];
    }

    const lastKey = keys[keys.length - 1];
    current[lastKey] = value;

    return json;
  }

以上两个函数的用法如下

function handlePathAndUpdateSelected() {
   var temp;
   
    checkedArr.forEach(function (item) {
      const data = findValuePath(fetchedData, item);

      const cleanup =
        data.substr(0, data.lastIndexOf(".") + 1) + "orderSubStatus";
      temp = updateNestedJSON(fetchedData, cleanup, 2);
    });
    setfetchedData(temp);

  }

我正在将值从1更改为2(orderSubStatus)
数据得到更新,但是当我使用state设置它时,它不会触发useEffect更改,我怎么可能做到这一点呢?
单击accept all并检查snack Snack here中的控制台日志

v1uwarro

v1uwarro1#

这与React-Native规则有关。
useEffect将使用比较器来检查是否有任何状态被更新。当你使用setfetchedData(temp),而tempfetchedData的浅层副本时,java-script会认为它们是同一个项目,不会将其视为更改。因此,useEffect()不会触发。
为了解决这个问题,我们通常会使用spread operator...)。它将创建一个全新的副本,该副本不引用编程逻辑中的相同项。

function handlePathAndUpdateSelected() {
   var temp;
   
    checkedArr.forEach(function (item) {
      const data = findValuePath(fetchedData, item);

      const cleanup = data.substr(0, data.lastIndexOf(".") + 1) + "orderSubStatus";
      temp = updateNestedJSON(fetchedData, cleanup, 2);
    });

    //Change this line
    setfetchedData([...temp]);
  }

相关问题