React - useEffect JSON 对象，内容相同但字段混乱答案

【问题标题】：React - useEffect JSON object with same content but disordered fieldsReact - useEffect JSON 对象，内容相同但字段混乱
【发布时间】：2021-11-11 18:15:53
【问题描述】：

我正在从我的 firebase 服务器获取 JSON 数据，有时，它的字段是无序的。

我想在json对象的内容发生变化时运行useEffect...但是，尝试执行以下操作

useEffect(() => {}, [JSON.stringify(data)]);

由于字段混乱，无法正常工作。

我做了点心，模拟我现在的情景。

我该如何解决这个问题？

注意：似乎最好避免状态更新...有什么想法吗？

【问题讨论】：

你能提供一个数据的例子吗？如何/何时获取数据？或者更确切地说，组件如何获取更新的数据？您能否在获取数据时比较数据并执行您想要执行的任何操作？
也许你正在寻找stackoverflow.com/a/55808960/5863438

标签： javascript reactjs react-native react-hooks

【解决方案1】：

来自这个答案：https://stackoverflow.com/a/3849480/8861638

我们可以用这个函数对两个对象进行深度比较，因为它使用递归，所以可以保证一直进去。

function countProps(obj) {
    var count = 0;
    for (k in obj) {
        if (obj.hasOwnProperty(k)) {
            count++;
        }
    }
    return count;
};

function objectEquals(v1, v2) {

    if (typeof(v1) !== typeof(v2)) {
        return false;
    }

    if (typeof(v1) === "function") {
        return v1.toString() === v2.toString();
    }

    if (v1 instanceof Object && v2 instanceof Object) {
        if (countProps(v1) !== countProps(v2)) {
            return false;
        }
        var r = true;
        for (k in v1) {
            r = objectEquals(v1[k], v2[k]);
            if (!r) {
                return false;
            }
        }
        return true;
    } else {
        return v1 === v2;
    }
}

现在，我们可以利用objectEquals 函数来比较该组件中新的和现有的数据道具。

首先，我们希望在数据到来时对其进行跟踪，以便将其与未来的数据进行比较，我们可以全面使用useRef 钩子，这样我们就不会触发任何重新渲染。

// data is our initial state.
const savedData = useRef(data || {});

然后，我们可以自定义useEffect，听听savedData和新来的数据对比，看看有没有变化。

const dataChanged = objectEquals(data, savedData.current);

useEffect(() => {
  if (dataChanged) {
    savedData.current = data;
    // Do something...
  }
}, [dataChanged])

【讨论】：