Значение параметра функции по умолчанию из состояния компонента React

Question

Сегодня я сделал обзор для своего коллеги и нашел определение функции, которое меня заинтересовало. Он реализовал функцию внутри реагирующего компонента со значениями параметров по умолчанию, если вызов функции не снабжен аргументом. Он использовал значение state в качестве параметра по умолчанию.

Это выглядело так:

class CustomComponent extends React.Component {
    constructor(props) {
         this.state = {
             loadedData = [], // array of objects
         };

         this.filterDates = (fromUtc, toUtc, loadedData = this.state.loadedData) {
             // do something with 'loadedData' based on time range 'fromUtc' and 'toUtc'
         }
    }
}

Он не смог дать мне хорошего объяснения. Только то, что это работает в его реализации.

Я всегда использовал «статические» значения параметров по умолчанию (например, [], число и т. Д.). Мне любопытно, можно ли использовать какой-то «динамический»параметр по умолчанию, который изменяется при изменении state.

Можно ли так написать? Может ли быть проблемный случай?

Answer 1

В конструкторе this.state представляет собой простой объект без каких-либо магических свойств состояний. Таким образом, loadedData = this.state.loadedData - это то же самое, что и loadedData = [], но второй более читабелен.

Answer 2

Согласно Руководство по стилю Javascript Airbnb -es6 параметры по умолчанию этот подход хорош. Однако я подвергаю сомнению назначение значения по умолчанию для состояния, которое является изменяемым по определению, если это не желаемый эффект. Параметр по умолчанию не должен быть изменяемым. Лично я вижу такой подход впервые и думаю, что он не интуитивен, но, возможно, это просто мой опыт.

На мой взгляд, приведенный ниже код чище, проще для понимания и менее глючит:

class CustomComponent extends React.Component {
    constructor(props) {
         this.state = {
             loadedData = [], // array of objects
         };

         this.filterDates = (fromUtc, toUtc, loadedData = []) => {
             // do something with 'loadedData' based on time range 'fromUtc' and 'toUtc'
         }
    }
}