时间戳

首页 > 解决方案 > 自定义挂钩内的 setState 调用未更新状态

javascript - 自定义挂钩内的 setState 调用未更新状态

问题描述

我正在尝试设置一个基本的自定义挂钩以在 React Native 中返回设备方向。我旁边有一个功能代码示例，但我不知道为什么这不起作用。我认为这是某种关闭/范围问题，但显然我不知道。

我知道有更简单的方法来获取设备方向，但我想知道为什么这不起作用以及如何使它起作用。

当前行为：调用setOrientation不会更改orientation. 预期行为：调用setOrientation会更新orientation.

一旦发生这种情况，我认为钩子会正常工作，因为它null每次Dimensions更新都会返回。

[更新：为清楚起见进行了编辑]


import { Dimensions, } from 'react-native';

function useDeviceDimensions() {

  const [orientation, setOrientation] = useState(null);

  useEffect(() => {
    const setDimensions = (e) => {
      console.log('running', orientation); // null
      const {width, height} = e.window;
      setOrientation(width > height ? 'landscape' : 'portrait');
    };

    Dimensions.addEventListener('change', setDimensions);

    return () => Dimensions.removeEventListener('change', setDimensions);
  }, [])

  return orientation;
}

export default useDeviceDimensions;```

标签： javascriptreactjsreact-nativeclosuresreact-hooks

解决方案

您的示例有效...

setOrientation实际上会改变 state 的值orientation并useDeviceDimensions返回改变的orientation. 问题在于您放置console.log语句的位置-您是对的，这与传递给useEffect.

useEffect仅使用您定义的回调调用一次。这个回调是一个闭包，可以orientation从useState. 在创建闭包时，orientation变量将具有值null。因为永远不会创建新的闭包（[]依赖项），所以当触发包含的更改侦听器时useEffect，它将始终打印值。null

然而，setOrientationinsidesetDimensions会将更改分派并传达给 React。流程是这样的：

  1. 闭包在第useEffect一次渲染时被调用一次。
  2. 稍后某个change事件被触发。
  3. setDimensions在您的闭包内部始终从函数外部范围orientation变量（在构造时具有 value null）打印相同的值。
  4. setOrientation被调用时，React 在内部更新状态并在父组件中触发新的渲染周期。
  5. useDeviceDimensions从父组件再次调用，它现在拥有并返回新orientation状态。
  6. 触发了一个新的变化，再继续 3。

第 4 点适用于闭包，因为 React 为每个组件都有一个“内存单元”的内部列表，它可以在其中读取和更新最近的状态，因此更新可以在闭包范围内工作（有关更多信息，请参见此处）。读取端orientation是一个陈旧的变量，如果你愿意的话，它只是对 React 最初存储的第一个状态值的引用。

...但最好useEffect以安全的方式声明

您的useEffect钩子使用您在其依赖项数组中未提及的状态。React 文档对此有何评论：

如果您使用此优化，请确保数组包含组件范围内的所有值（例如 props 和 state），这些值随时间变化并被效果使用。否则，您的代码将引用以前渲染中的陈旧值。关联

因此，如果您还想使用orientationin useEffect，可以将其声明为依赖项：

 useEffect(() => {
  ...
  }, [orientation]);

看看这个Codesandbox的例子，希望它能澄清一点！

推荐阅读