Сравнение двух массивов состояний в react не вернет логическое значение (True), если они равны

Question

Когда я сравниваю два массива из своего состояния, если они равны, я хочу изменить логическую переменную третьего состояния на «истина». Однако, когда два массива равны, оператор if, который я создал для его обнаружения, не возвращает "истину".

Я делаю это в setInterval (), я не знаю, имеет ли это какое-либо отношение к эта проблема ...

class DisplaySort extends Component {
  constructor(props) {
    super(props);
    this.state = {
      array: [1, 2, 3],
      array2: [1, 2, 3],
      istrue: false,
     };
    this.compare = this.compare.bind(this);
};

render() {
   return (
     <div>
       <button onClick={this.compare}>Compare</button>
     </div>
    );
  }

compare(e) {
    this.myInterval = setInterval(() => {
      let a = this.state.array.slice();
      let b = this.state.array2.slice();
      if (a === b) {
        this.setState({ istrue: true });
        clearInterval(this.myInterval);
      }

(Установленный интервал используется для другой операции в приложении (также есть оператор else после if), но исключен для краткости)

Answer 1

Вы можете просто использовать это:

  if(JSON.stringify(a) == JSON.stringify(b)){YOUR CODE HERE};

ПРИМЕЧАНИЕ: это решение подходит для вашего варианта использования, но не для сложных значений массива.

Answer 2

Если вы сравните массивы таким образом, вы всегда получите false, если вы не проверите a === a

Вот функция для проверки равенства между объектами / массивами, также если они вложены:

function isEqual(value, other) {
    // Get the value type
    var type = Object.prototype.toString.call(value);

    // If the two objects are not the same type, return false
    if (type !== Object.prototype.toString.call(other)) {
        return false;
    }

    // If items are not an object or array, return false
    if (['[object Array]', '[object Object]'].indexOf(type) < 0) {
        return false;
    }

    // Compare the length of the length of the two items
    var valueLen = type === '[object Array]' ? value.length : Object.keys(value).length;
    var otherLen = type === '[object Array]' ? other.length : Object.keys(other).length;
    if (valueLen !== otherLen) {
        return false;
    }
    // Compare two items
    var compare = function (item1, item2) {

        // Get the object type
        var itemType = Object.prototype.toString.call(item1);

        // If an object or array, compare recursively
        if (['[object Array]', '[object Object]'].indexOf(itemType) >= 0) {
            if (!isEqual(item1, item2)) {
                return false;
            }
        }

        // Otherwise, do a simple comparison
        else {

            // If the two items are not the same type, return false
            if (itemType !== Object.prototype.toString.call(item2)) return false;

            // Else if it's a function, convert to a string and compare
            // Otherwise, just compare
            if (itemType === '[object Function]') {
                if (item1.toString() !== item2.toString()) return false;
            } else {
                if (item1 !== item2) return false;
            }

        }
    };

    // Compare properties
    if (type === '[object Array]') {
        for (var i = 0; i < valueLen; i++) {
            if (compare(value[i], other[i]) === false) return false;
        }
    } else {
        for (var key in value) {
            if (value.hasOwnProperty(key)) {
                if (compare(value[key], other[key]) === false) return false;
            }
        }
    }

    // If nothing failed, return true
    return true;

}

Это не я написал, гуглил долго go.