我很难理解“exhaustive-deps”代码检查规则。
这是一个带有代码检查问题的简单React组件:
const MyCustomComponent = ({onChange}) => {
const [value, setValue] = useState('');
useEffect(() => {
onChange(value);
}, [value]);
return (
<input
value={value}
type='text'
onChange={(event) => setValue(event.target.value)}>
</input>
)
}
需要我将 onChange
添加到 useEffect
的依赖数组中。但是据我理解,onChange
永远不会改变,所以它不应该在那里。
通常我会这样管理:
const MyCustomComponent = ({onChange}) => {
const [value, setValue] = useState('');
const handleChange = (event) => {
setValue(event.target.value);
onChange(event.target.value)
}
return (
<input
value={value}
type='text'
onChange={handleChange}>
</input>
)
}
为什么需要lint?对于第一个示例的lint规则有清晰的解释吗?
或者我不应该在这里使用useEffect
吗?(我是钩子的新手)
useEffect
非常类似于componentWillMount
,componentDidMount
的组合,当你从useEffect
返回一个函数时,该函数被视为componentWillUnmount
。目前你要处理的只是一个简单的状态改变,useState
钩子已足以实现这一点。 - Mike AbelnuseEffect
似乎不太合适。属性onChange
可以很容易地移动到input
的onChange
方法的主体中。尽管为了清晰起见应该将其重命名。基本上是问题中 OP 给出的第二个示例。 - Mike AbelnuseEffect
可以从额外的triggers
参数中受益。 - Eric Burel