Почему состояние не обновляется внутри этого реагирующего компонента 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. Нажмите на карту (белая область, должен регистрироваться «щелчок MAP» и значение editMode)
4. Нажмите кнопку переключения (следует изменить значение editMode на true)
5. Нажмите на карту (должно войти то же сообщение плюс «В режиме редактирования»)
6. Нажмите на любой голубой элемент (должно войти то же сообщение плюс «В режиме редактирования», это не )

Текущее поведение

Значение EditMode не изменяется для функции "onItemClick", но оно действует внутри функции "onMapClick"

Ожидаемое поведение

Значение EditMode должно вести себя c последовательно во всех определениях функций в пределах своей сферы действия

Answer 1

Я понял это

Вы обманывают, когда устанавливаете this.onClick = props.onClick; в конструкторе Flowpoint. js

Проблема с этим заключается в том, что this.onClick никогда не обновляется, когда props update, поэтому он остается первой функцией, которую вы передали ему.

Вместо этой строки сделайте это в Flowpoint. js

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