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

Question

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

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

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

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

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

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;```

Answer 1

您的示例有效...

setOrientation 实际上会改变orientation 的状态值，useDeviceDimensions 会返回改变后的orientation。问题在于您放置 console.log 语句的位置 - 您是对的，这与传递给 useEffect 的闭包（及其范围）有关。

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

但是，setDimensions 内部的 setOrientation 将分派并将更改传达给 React。流程是这样的：

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

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

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

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

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

所以如果你还想在useEffect 中使用orientation，你可以将它声明为依赖：

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

以Codesandbox 为例，希望它能澄清一点！