React.js传入setState作为prop会导致对依赖项使用props的警告



我将状态作为变量通过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'。既包括它或删除依赖项数组。然而,"道具"在什么时候会改变任何prop更改,因此首选的修复方法是在useEffect调用之外解构'props'对象并引用那些特定的道具

它告诉你问题是什么。一般来说,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足够聪明,知道它永远不会更改,并允许您将其删除。但是,如果它是作为道具从其他地方传入的,它就没有办法知道。

钩子的起毛规则非常好。总的来说,除非你真的知道自己在做什么,否则你可能会盲目地听从它给出的建议。Eslint实际上添加了一个完整的"建议";特性,例如,如果您将光标放在错误上并按下ctrl+.

, vscode将为您更改。

最新更新