在 useEffect 中设置时，React useState 钩子总是未定义

Question

在我的 React 应用程序中，我有一个 useEffect 检查元素是否设置了显示样式 none。如果是这样，那么它应该将状态设置为 false，但是它总是返回为未定义。

const [testingProp, setTestingProp] = useState();

useEffect(() => {
    const styles = getComputedStyle(customerPropertyTypeSection.current);

    if (styles.display == 'none') {
      setTestingProp(false);
      console.log('style set to none'); // this prints
      console.log(testingProp); // this prints 'undefined'
    }
  }, []);

Answer 1

setState 在 React 中就像一个异步函数。
所以在设置后立即放置 console.log(state)，很可能会显示以前的值，在这种情况下是 undefined，因为它实际上并没有完成更新状态，直到日志命令运行s.

您可以将相关状态的专用 useEffect 挂钩用作依赖项，以根据状态变化采取行动。

示例：

useEffect(() => {
   console.log(state);
}, [state]);

基本上，示例中的回调函数会在每次状态更改时运行。

P.S。 - 也许你可以不用你在这里用来填充状态的useEffect。
如果您最初有权访问 customerPropertyTypeSection.current，则可以执行以下操作：

const [testingProp, setTestingProp] = useState(() => {
   const styles = getComputedStyle(customerPropertyTypeSection.current);
   return styles.display !== 'none';
});

如果上面的示例适合您，那么您使用的 useEffect 是多余的，可以删除。

在 useEffect 中设置时，React useState 钩子总是未定义

React useState hook always comes as undefined when setting it in useEffect

reactjs

use-effect

use-state

use-ref