React.js 将 setState 作为 prop 传递会导致警告有关将 props 用于依赖项

Question

我通过类似道具将 state 作为变量传递给组件，例如...

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

在 PlaceDataInIndexDB.js 我有一个 useEffect 最终设置 state 使用

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

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

这是警告...

React Hook useEffect 缺少依赖项：'props'。 包括它或删除依赖数组。 但是，当任何道具发生变化时，“道具”会发生变化，因此首选的解决方法是在 useEffect 调用之外解构“道具” object，并在 useEffect react-hooks/exhaustive-deps 中引用这些特定道具

Answer 1

它告诉你问题是什么。 通常， useEffect function 中引用的任何内容也需要存在于依赖数组中，因此 React 知道在这些事情发生变化时再次运行它。 如果您使用的东西是其他一些 object 的属性（如props ），最好在引用它们之前从那里提取值。

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 object：

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

注意setSomeState也必须在依赖数组中。 如果 - 并且仅当 - useState在同一个组件中，linter 足够聪明，可以知道它永远不会改变，并让您将其排除在外。 但是，如果它是从其他地方作为道具传入的，它就无法知道。

钩子的 linting 规则非常好。 总的来说，除非你真的知道自己在做什么，否则你可以盲目地听从它提出的建议。 Eslint 实际上为此特定规则添加了一个完整的“建议”功能，例如，如果您将 cursor 放在错误上并按ctrl+.