如何使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>
    )

但是，短绒棉开始爆炸：

useEffect缺少依赖项：'onChange'和'value'...

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

Answer 1

您看到的警告是因为您的useEffect函数 不依赖于按键，而是取决于onChange和{{1} }。更好的方法可能是在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]) 仅在您只能将您想要的东西表示为副作用时使用，但在这种情况下无需这样做；这可以在事件处理程序中进行处理，并且这样做更容易阅读。