必须在构造函数中使用解构道具分配错误[重复]

Posted 2023-03-27

【中文标题】必须在构造函数中使用解构道具分配错误[重复]

【英文标题】：Must use destructuring props assignment error in constructor [duplicate]

【发布时间】：2021-03-23 19:43:32

【问题描述】：

关于 lint 代码验证错误：

error  Must use destructuring props assignment  react/destructuring-assignment

我对解构属性的概念不熟悉，我对如何对以下代码使用解构方法感到有些困惑：

  constructor(props) 
    super(props);
    this.state = 
      clickedFirstTime: !this.props.showDefault,
    ;
  

请注意在 Google 上发现此内容的其他人，我已阅读以下资源以帮助我了解解构是什么，但我无法弄清楚在这种情况下如何进行：

Must use destructuring props assignment https://medium.com/@lcriswell/destructuring-props-in-react-b1c295005ce0

【问题讨论】：

你应该不在这里使用解构。禁用规则，它的误报太多了。

我觉得我应该有一个更好的后续问题，但我能想到的是：真的吗？如果这条规则如此糟糕，为什么要添加该规则？

如何执行此操作的链接：***.com/questions/51222448/…，Almaju 回答

【参考方案1】：

The rule希望你永远不要写this.props.…。在这种情况下，它正在寻找

constructor(props) 
  super(props);
  const  showDefault  = this.props;
  this.state = 
    clickedFirstTime: !showDefault,
  ;

但实际上你的代码很好，如果它很烦人，你应该禁用它。

【讨论】：

我的脚还不是很强壮，所以我宁愿保持一个烦人的规则，直到我真正知道我很生气，而不是错误或懒惰。处理这个让我理解了解构和道具传播。所以我想规则在那里是件好事；）

【参考方案2】：

  constructor(...props) 
    super(props);
    this.state = 
      clickedFirstTime: !this.props.showDefault,
    ;
  

【讨论】：

虽然这在技术上可行，但我认为在这里传播道具是个坏主意......

你可以添加你需要的所有道具，这只是传播如何工作的例子 showDefault, ...props

我觉得比这个 const showDefault = this.props; 更优雅