Question

刚刚开始测试React Hooks的作用。打算重写组件的逻辑-分隔符。它在mouseDown + mouseMove上更改其方向，并在mouseUp上停止。但是我使用钩子的方式并不是核心功能，因为新版本无法正常工作（它只更改一次状态，而不执行任何操作）=（

请有人看看我的例子，也许会提示一些问题吗？

我的代码沙箱：https://codesandbox.io/s/jzokr7z1n3

在index.js中，可以更改以下项的导入：

工作类示例（Separator.jsx）
不起作用的钩子示例（Separator.js）

Answer 1

首先，您应该知道道具在反应中是不变的。

您将道具定义为-

const getInitialState = props => ({
position: props.settings.position,
isSeparatorMoving: false,
targetOffsetStyle: props.settings.direction === "horizontal" ? "top" : "left"
});

但是在那之后，您将props用作代码中的状态，这是完全错误的-

 useEffect(
() => {
  if (!state.isSeparatorMoving) {
    const targetOffsetStylePayload =
      props.settings.direction === "horizontal" ? "top" : "left";
    const positionPayload = props.settings.position;
    dispatch({ type: "position", payload: positionPayload });
    dispatch({
      type: "targetOffsetStyle",
      payload: targetOffsetStylePayload
    });
  }
},
[state]
);

我建议您将props用作props，将states用作states。您应使用状态而不是props，因为您希望以布尔值true和false更改这些值。

您应该先研究this文档。

React初学者钩子：代码示例的奇怪行为

1 个答案: