语法错误：其余元素必须为最后一个元素

Question

收到此错误，但与我在堆栈溢出时发现的其他帖子不同，这不是由于散布运算符未最后出现这一事实。实际上，它的出现是由于末尾的逗号：

const SlashedPrice = ({
    price,
    currencySymbol,
    ...props,
}) => {

当我从...props中删除逗号时，错误消失了。起初，我认为这是babel的问题，但是我引入了2条新规则，但没有运气："@babel/plugin-proposal-object-rest-spread"和"syntax-trailing-function-commas",

此时，我对导致问题的原因不知所措。我可以从哪里开始调试？

背景：我的代码库中的所有内容都运行良好，直到删除了node_modules并重新运行yarn install。

Answer 1

问题是，当您解构道具时，解构的最后一个元素应该像您一样被命名为rest，而不是props，因为从字面上看，这是其余的道具，但不包括那些道具。提取。更改为

const SlashedPrice = ({
    price,
    currencySymbol,
    ...rest,
}) => {

它应该可以按预期工作。

Answer 2

此逗号称为Trailing comma，如果要添加新属性，则可以简单地添加新行，而无需修改先前的最后一行（如果该行已使用尾部逗号）。这使得版本控制差异比较清晰，编辑代码的麻烦可能会减少。

问题是对象其余部分的尾部逗号在EcmaScript标准中不支持。请参见[p0]的question和issue