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

Question

我有一个有状态的组件（使用反应钩子）和一个无状态的布局组件。 状态的行为出乎意料，就像在有状态组件内部定义的 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 在 props 更新时永远不会更新，因此它仍然是您传递给它的第一个函数。

代替那一行，在 Flowpoint.js 中执行此操作

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