为什么这个反应钩子组件中的状态没有更新?

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. 单击任何青色项目(应记录项目索引和编辑模式值(
点击地图
3. (白色区域，应记录"地图点击"和编辑模式值(
4. 单击切换按钮(应将编辑模式值更改为 true(
5. 单击地图(应记录相同的消息以及"在编辑模式下"(
6. 单击任何青色项目(应记录相同的消息加上"在编辑模式下"，它不会(

当前行为

编辑模式值在"项目点击"功能上不会更改， 但它确实在"地图点击"功能中

预期行为

EditMode 值应在其作用域内的所有函数定义中保持一致的行为

Answer 1

我想通了

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

这样做的问题是，当 props 更新时，this.onClick永远不会更新，因此它保留为您传递给它的第一个函数。

而不是那一行，在 Flowpoint 中执行此操作.js

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