如何使 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 缺少依赖项：'onChange' 和 'value'...

如何解决这个问题，还是我在这里使用了不正确的钩子？

Answer 1

您看到的警告是因为您的useEffect 函数不取决于按键，它取决于onChange 和value 的值。完成此操作的更好方法可能是在 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 应该在你只能将你想要的东西表示为副作用时使用，但在这种情况下没有必要这样做；这可以在事件处理程序中处理，这样做更容易阅读。