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

【问题标题】：React.js Passing setState as prop causes a warning about using props for dependenciesReact.js 将 setState 作为 prop 传递会导致警告有关将 props 用于依赖项
【发布时间】：2021-05-13 10:11:49
【问题描述】：

我通过 props 将状态作为变量传递给组件...

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

在 PlaceDataInIndexDB.js 中，我有一个 useEffect，它最终使用设置状态

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

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

这是警告...

React Hook useEffect 缺少一个依赖项：'props'。要么包括它或删除依赖数组。但是，“道具”会改变 any 道具发生变化，因此首选的解决方法是在 useEffect 调用之外解构“道具”对象并引用那些特定的道具内部 useEffect react-hooks/exhaustive-deps

【问题讨论】：

是的，但我怎样才能用状态做到这一点？我知道如何使用变量来做到这一点。
按照它告诉你的去做。在 useEffect(()=>{ setSomeState()},[user]) 中访问 props 之前对其进行解构
能否请您展示如何使用 setSomeState 执行此操作？
有人吗？我不确定如何解构状态。显然其他道具可以初始化为 const something = props.something 但是如何使用 setState 函数来做到这一点？
const {user, setSomeState} = props; useEffect(()=>{setSomeState()}, [user]);我如上所述尝试了这个，但它仍然希望我将 setSomeState 放入依赖数组中。我被告知这是不好的形式。

标签： javascript reactjs react-props use-effect

【解决方案1】：

它告诉你问题是什么。通常，useEffect 函数内部引用的任何内容都需要存在于依赖数组中，因此 React 知道在这些事情发生变化时再次运行它。如果您使用的东西是其他对象的属性（例如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 对象：

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

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

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

【讨论】：