Обновление переменной ReactJS без кода, который будет выполнен

Question

Я схожу с ума ... Если кто-то может мне это объяснить:

componentDidUpdate(prevProps, prevState) {
        let categoriesChange = false

        console.log('check', JSON.stringify(this.checkedd), JSON.stringify(this.props.checked))

        if (JSON.stringify(this.checkedd) !== JSON.stringify(this.props.checked)) {
            console.log('did')

            categoriesChange = true

            this.checkedd = this.props.checked
            console.log('didit', JSON.stringify(this.checkedd), JSON.stringify(this.props.checked))
        }

        let currentQuery = this.returnQueryString(prevProps.filter);
        let nextQuery = this.returnQueryString(this.props.filter);

        if (categoriesChange) {
            if (nextQuery.send) {
                this.props.refresh(nextQuery.queryString);
            }
        }
    }

В этом фрагменте кода переменная this.checkedd, для которой создается экземпляр с нулем в конструкторе, обновляется без ввода в JSON.stringify if.

Всякий раз, когда Checked props (this.props.checked) обновляется, первый консольный журнал показывает их равными без ввода в if, чтобы показать "did" console.log.

Может кто-нибудь объяснить, как это вообще возможно? что переменная обновляется без выполнения кода?

Answer 1

Это потому, что объекты являются ссылочными типами в javascript. Когда вы говорите, this.checkedd = this.props.checked, вы присваиваете ссылку this.props.checked объекта this.checkedd, а не фактическое значение.

Поэтому, когда this.props.checked будет обновлено, this.checked также будет отражать это изменение, поскольку они оба ссылаются на один и тот же объект в памяти.

Кроме того, способ, которым вы пытаетесь достичь того, чего вы хотите, довольно странный. Вам не нужно хранить предыдущее значение реквизита в переменной экземпляра, т.е. this.checkedd. Крюк componentDidUpdate имеет два параметра: prevProps и prevState. Вы можете просто проверить, изменились ли категории, сравнив значения в prevProps.checked и this.props.checked.