为什么状态无法在此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

我知道了

在Flowpoint.js的构造函数中设置this.onClick = props.onClick;时您会感到厌烦

这样做的问题在于，this.onClick永远不会在道具更新时更新，因此它保持为传递给它的第一个函数。

代替那一行，在Flowpoint.js中完成

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