为什么这个 react Hooks 组件内的状态没有更新？

Question

我有一个有状态的组件（使用 React 钩子）和一个无状态的布局组件。状态的行为出乎意料，因为在有状态组件中定义的 2 个函数中，一个获取状态的当前值，另一个获取状态的默认值。

反应版本：16.12.0

片段（代码沙盒上的完整版本https://codesandbox.io/s/sweet-smoke-tpjge）：

import React, { useState } from "react";
import MapLayout from "./MapLayout";

function Map(props) {
  const [editMode, setEditMode] = useState(false);
  const items = [
    { id: 0, name: "item 0", pos: { x: 0, y: 0 } },
    { id: 1, name: "item 1", pos: { x: 0, y: 100 } }
  ];
  function onItemClick(item) {
    if (!editMode) return; // ! Expected to change with state
    console.log("On Edit mode"); // ! Never prints
  }
  function onMapClick(item) {
    if (!editMode) return; // ! this works fine
    console.log("On Edit mode"); // This prints OK
  }
  console.log("rerender, editMode value: ", editMode);
  return (
    <MapLayout
      editMode={editMode}
      toggleEditMode={() => {
        setEditMode(!editMode);
      }}
      items={items}
      onItemClick={onItemClick}
      onMapClick={onMapClick}
    />
  );
}

export default Map;

重现步骤

1. 打开控制台日志
2. 单击任何青色项目（应记录项目索引和 editMode 值）
3. 点击地图（白色区域，应记录“地图点击”和 editMode 值）
4. 单击切换按钮（应将 editMode 值更改为 true）
5. 点击地图（应该记录相同的消息加上“编辑模式”）
6. 单击任何青色项目（应该记录相同的消息加上“编辑模式”，它没有）

目前的行为

EditMode 值不会在“onItemClick”函数上改变，但它会在“onMapClick”函数内改变

预期行为

EditMode 值应该在其作用域内的所有函数定义中表现一致

Answer 1

我想到了

当你this.onClick = props.onClick;在 Flowpoint.js 的构造函数中设置时，你搞砸了

这样做的问题是this.onClickprops 更新时永远不会更新，所以它仍然是你传递给它的第一个函数。

在 Flowpoint.js 中执行此操作而不是该行

onMouseUp(e) {
   // Trigger user-defined onClick?
   if (!this.didDrag) this.props.onClick(e);
   ...