反应js将setState作为prop传递会导致对依赖项使用props发出警告

Question

我通过道具将状态作为变量传递给组件，就像。。。

const [someState, setSomeState] = useState([])
PlaceDataInIndexDB({ setSomeState: setSomeState,
    user: props.user })

在PlaceDataInIndexDB中。js I有一个useEffect，它最终使用

useEffect(() => {
    props.setSomeState([array])
}), [props.user]
 

问题是，我收到一个警告，说我需要在我的依赖数组中使用道具，但是，我不希望每次道具更改时使用效果都运行，因为我有很多其他道具在那里。我能为此做些什么？这是我的代码的一个极其简化的版本。我可以发布确切的代码，但它是一个更多的看。

这是警告。。。

React Hook use效应有一个缺失的依赖项：道具。要么包含它，要么删除依赖数组。然而，当任何道具发生变化时，“道具”都会发生变化，因此首选的修复方法是将“道具”对象的结构分解为在use效应调用之外的对象，并指称在use效应反应挂钩/穷举deps中的那些特定道具

Answer 1

它告诉你问题是什么。通常，useffect函数中引用的任何内容都需要存在于依赖项数组中，因此React知道在这些内容发生变化时再次运行它。如果您正在使用的对象是其他对象的属性（如道具），最好在引用它们之前从中取出值。

const PlaceDataInIndexDB = (props) => {
  const { setSomeState, user } = props

  useEffect(() => {
    setSomeState([array])
  }), [setSomeState, array] // <-- your example doesn't show where `array` comes from, but needed here as well

  // ...
}

事实上，您可以对props进行内嵌的结构化，这样您甚至永远不会引用整个props对象：

const PlaceDataInIndexDB = ({ setSomeState, user }) => {

请注意，setSomeState也必须位于依赖项数组中。如果（且仅当）useState在同一个组件中，linter就足够聪明，知道它永远不会改变，并允许您忽略它。然而，如果它是作为道具从其他地方传入的，它就没有办法知道。

挂钩的起毛规则很好。总的来说，除非你真的知道自己在做什么，否则你可以盲目地听从它的建议。Eslint实际上为此特定规则添加了一个完整的“建议”功能，例如，如果您将光标放在错误上并按ctrl键，vscode将为您更改