React Hooks:旧状态值持续关闭

Question

好吧，我意识到这将是一个超长的例子，但是我对此感到非常困惑，所以我以为我俩都与所有人分享，也尝试找到解决方案。<<<<<<<<<<<</p>

因此，我正在尝试制作一个"标签输入"组件，并且每当您输入空间时，它都会将其附加到您传递的列表中。为了删除其中一个"标签"，您清除内容可编辑的区域，一次击中Backspace以"准备"列表中的最后一个标签以进行删除，然后再次确认删除。在上下文中，这是有道理的，但是为了示例，我写了一个剥离版本。我有以下代码框：https://codesandbox.io/s/8q0q3qw60

现在，这是我没有得到的部分。

除了实际删除标签外，一切似乎完全按预期工作。由于某种原因，我可以适当地"准备"删除的最后一个标签，但是当我再次单击backspace以确认时，由于某种原因（从挂钩中）在闭合中的 prepTagForRemoval是内容可编辑区域的关键回调，永远不会更改。它总是是错误的，但是仅在回调中！这导致标签在确认其删除后永远不会被适当删除。

为了再生这个...

1. 打开代码沙盒链接
2. 单击红色超过的框（内容编辑的div）
3. 键入"你好"（没有引号，所以你好，然后是一个空间
4. 你好，将移到上面的线上，上面写着"标签："
5. 单击backspace
6. 现在为删除做准备是正确的，"你好"在红色中突出显示
7. 再次单击backspace

目前，此时，它应该 刚刚从"标签："删除了" Hello"："行，但是实际的行为只是将prefforremoval设置为false，然后再次将Hello Black转动，不从"标签："

中删除" Hello"

对不起，如果这令人困惑，我很乐意尝试澄清更多。我真的很想让此示例正确地工作，并在发出第二次删除时删除最后一个标签（或至少调用onRemove）。希望有人可以伸出援手！

Answer 1

这是反应性的错误。以下是其shouldComponentUpdate方法。它没有检查对onKeyDown的更改，并且由于backSpace不会引起对该值的任何更改，因此不会重新渲染，因此它使用handleKeyDown函数的过时版本。

  shouldComponentUpdate(nextProps: Props): boolean {
    const { props } = this;
    const el = this.getEl();
    // We need not rerender if the change of props simply reflects the user's edits.
    // Rerendering in this case would make the cursor/caret jump
    // Rerender if there is no element yet... (somehow?)
    if (!el) return true;
    // ...or if html really changed... (programmatically, not by user edit)
    if (
      normalizeHtml(nextProps.html) !== normalizeHtml(el.innerHTML)
    ) {
      return true;
    }
    // Handle additional properties
    return props.disabled !== nextProps.disabled ||
      props.tagName !== nextProps.tagName ||
      props.className !== nextProps.className ||
      props.innerRef !== nextProps.innerRef ||
      !deepEqual(props.style, nextProps.style);
  }

在这里，它正在使用React-conteDeDable的固定副本：https：//codesandbox.io/s/o41yjr3r3r3q

我更改了shouldComponentUpdate的最后一部分添加props.onKeyDown !== nextProps.onKeyDown：

return (
  props.disabled !== nextProps.disabled ||
  props.tagName !== nextProps.tagName ||
  props.className !== nextProps.className ||
  props.innerRef !== nextProps.innerRef ||
  props.onKeyDown !== nextProps.onKeyDown ||
  !deepEqual(props.style, nextProps.style)
);