React组件状态作为默认函数参数值

Question

今天我为我的同事做了一篇评论，发现他实现了一个让我很感兴趣的函数定义。如果函数调用没有提供参数，他在 react 组件内部使用默认参数值来实现函数。他将一个 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更改时更改。

这样写可以吗？ 是否可能存在问题的情况？

- PaulP

---

应该没问题吧？但是为什么首先的参数是可选的呢？ - Felix Kling

如果你可以直接传递 this.state.loadedData，那么这种做法的逻辑在哪里？ - Dennis Vash

在我看来，这是不好的。默认值应该是一个静态值，如果存在动态值，则应基于业务逻辑，并应成为主体的一部分。 - Rajesh

@dennis-vash 我不确定我是否理解你的问题。传递 this.state.loadedData 的逻辑在组件内部，但在不同的函数中。一旦他通过调用 filterDates(fromUtc, toUtc)（没有第三个参数）从 state 中过滤数组，第二次调用将使用不同的数组引用，其遵循 this.state.loadedData 的格式。（函数参数称为 loadedData 可能会令人困惑） - PaulP

Answer 1

根据Airbnb Javascript Style Guide -es6 default parameters，这种方法很好。然而，我对将默认值分配给状态产生了疑问，因为根据定义，状态是可变的，除非它是期望的效果。默认参数不应该是可变的。个人认为，我第一次看到这样的方法，我认为它不直观，但也许这只是我的经验。

在我看来，下面的代码更清晰、更易于理解，且更少出错：

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'
         }
    }
}

- TwistedOwl

Answer 2

在构造函数中，this.state 是一个没有任何特殊状态功能的简单对象。因此，loadedData = this.state.loadedData 和 loadedData = [] 是相同的，但后者更易读。

- alireza