在 React 中获取 useEffect 之外的变量的当前值答案

【问题标题】：Getting current value of variable outside the useEffect in React在 React 中获取 useEffect 之外的变量的当前值
【发布时间】：2021-05-18 12:23:16
【问题描述】：

我收到了来自 django 服务器的响应，之后我需要将时钟变量设置为 true，因为我在组件中使用了该变量。

let clock = false;
useEffect(() => {
      switch (true) {
        
      ........

        case dataParsed.type === "ClockInfo":
          {
            clock = true;
          }
          break;
      }
    };
  }, []);

<Header word={catchword} socketRef={socketRef} clock={clock} />

时钟值没有正确改变，它总是显示为假。我知道这是因为每次 react 渲染组件时它都会返回 false 值，那么我该如何正确地做到这一点？

我尝试使用 useRef，但它根本没有帮助。在我的组件中，我有一个条件，当时钟 == true 时开始工作。

【问题讨论】：

标签： javascript reactjs components

【解决方案1】：

由于您尝试在渲染输出中使用该值，因此您必须使用 state。设置状态是告诉 react 重新渲染组件的唯一方法。

const [clock, setClock] = useState(false);
// ...
  case dataParsed.type === "ClockInfo": {
    setClock(true);
    break;
  }

ref 可以让您在一次渲染到下一次渲染中获得持久值，但它无法启动渲染，因此它不适合您的情况。

【讨论】：

我试过了，还是不行。在 useEffect 块之外的时钟仍然等于 false。
那么您的 setClock(true) 代码没有运行，或者您的日志语句处于打印陈旧闭包值的位置。不看更多代码很难知道。

【解决方案2】：

试试看，如果可行的话

import { useState } from 'react';
const [clock,setclock] = useState(false);
useEffect(() => {
      switch (true) {
        
      ........

        case dataParsed.type === "ClockInfo":
          {
            setclock(true);
          }
          break;
      }
    };
  }, []);

【讨论】：

我试过了，还是不行。在 useEffect 块之外的时钟仍然等于 false。

【解决方案3】：

在 useEffect 依赖数组中添加 dataParsed.. 当 dataParse 的值改变时它会调用

import { useState } from 'react';
const [clock,setClock] = useState(false);
useEffect(() => {
      switch (true) {
      ........

        case dataParsed.type === "ClockInfo":
          {
            setClock(true);
          }
          break;
      }
    };
  }, [dataParsed]);


<Header word={catchword} socketRef={socketRef} clock={clock} />

【讨论】：