javascript - 如何使 useEffect 仅在单个依赖项发生更改时重新运行？

Question

我创建了一个自定义输入组件，它附加了“编辑/提交”按钮，如下所示:

……………………

我希望传递给它的 onChange 处理程序仅在用户点击提交按钮(即 (✓))时触发，而不是在每次按键时触发。所以，在 useEffect 中我做了:

    useEffect(() => {
      if (!editMode) { // only on submit
        onChange(value) // "value" is a state of my component
      }
    }, [editMode])

    return (
     <div className='my-input'>
      <input value={value} onChange={({target}) => setValue(target.value)}/>
      <Icon 
        name={editMode ? 'tick' : 'pencil'}
        onClick={() => setEditMode(editMode => !editMode)}
      />
     </div>
    )

但是 linter 开始爆炸:

useEffect has missing dependencies: 'onChange' and 'value'...

如何解决此问题或者我在这里使用了不正确的 Hook ？

Answer 1

您看到的警告是因为您的 useEffect 函数不依赖于按键，它取决于 onChange 的值> 和值。实现此目的的更好方法可能是在 onChange 处理程序本身内部发送事件:

const onClick = React.useCallback(() => {
  const nextEditMode = !editMode
  setEditMode(nextEditMode)
  // If we're flipping editMode on, fire the event.
  if (nextEditMode) {
    onChange(value)
  }
}, [value, onChange])

当你只能将你想要的东西表示为副作用时，应该使用

useEffect ，但在这种情况下没有必要这样做；这可以在事件处理程序中处理，并且这样做更容易阅读。