為什么這個 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;時，您this.onClick = props.onClick; 在 Flowpoint.js 的構造函數中

這樣做的問題是this.onClick在 props 更新時永遠不會更新，所以它仍然是你傳遞給它的第一個函數。

在 Flowpoint.js 中執行此操作而不是該行

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