我很难理解 'exhaustive-deps' lint 规则。
这是一个带有 lint 问题的简单 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 规则的任何明确解释?
或者我不应该useEffect
在这里使用?(我是一个有钩子的菜鸟)