typescript中的全局let变量

我的缺点是，在usingEffect之后，值​​rubro1和rubro2的浓度不变。也就是说，rubro1和rubro2的使用效果变化仅受使用效果的影响

有没有办法在useffect中更改rubro1和rubro2，然后在整个元素中看到这些更改？还是我只需要用钩子

let rubro1=""
let rubro2=""

const[ thereIsRubros, setThereIsRubros]=useState(false)


useEffect(() => {
  
  getItem("rubro1").then(res => {
    if(res!=null || res!= undefined){
      rubro1=res
      setThereIsRubros(true)
      getItem("rubro2").then(res => {
        if(res!=null || res!= undefined){
          rubro2=res
        }
        })
    }
  })
}, []);

if (tehreIsRubros){
 if(rubro1!=""&&rubro2==""){
  return (//Return some HTML code)
}
 }

---

尝试删除变量，并仅使用Costant

请注意，我只使用了一个useState，因此您可以使用一条指令同时更新rubro1和rubro2，并避免多次重新渲染

const [thereIsRubros, setThereIsRubros] = useState({rubro1: undefined, rubro2: undefined})


    useEffect(() => {

        getItem("rubro1").then(res => {
            if(res){
                setThereIsRubros({...thereIsRubros, rubro1:res})
                getItem("rubro2").then(res => {
                    if(res){
                        setThereIsRubros({...thereIsRubros, rubro2:res})
                    }
                })
            }
        })
    }, []);

    if (tehreIsRubros.rubro1 && tehreIsRubros.rubro2){
        return (//Return some HTML code)
    }

此外，如果（res！=null | | res！=undefined）

---

只需执行

if（res）

，它将检查

if（res！=null&&res！=undefined）

，我猜这是您的目标

尝试删除变量并仅处理costant

请注意，我只使用了一个useState，因此您可以使用一条指令同时更新rubro1和rubro2，并避免多次重新渲染

const [thereIsRubros, setThereIsRubros] = useState({rubro1: undefined, rubro2: undefined})


    useEffect(() => {

        getItem("rubro1").then(res => {
            if(res){
                setThereIsRubros({...thereIsRubros, rubro1:res})
                getItem("rubro2").then(res => {
                    if(res){
                        setThereIsRubros({...thereIsRubros, rubro2:res})
                    }
                })
            }
        })
    }, []);

    if (tehreIsRubros.rubro1 && tehreIsRubros.rubro2){
        return (//Return some HTML code)
    }

此外，如果（res！=null | | res！=undefined）

---

只需执行

if（res）

，它将检查

if（res！=null&&res！=undefined）

，我猜这是您的目标

如果您想在每次设置新值时更新组件，您必须使用

useState

，如果不希望每次设置新值时都更新组件，但希望在重新渲染之间保留一个值，请使用

useRef

如果您现在这样做，

rubro1

和

rubro2

将在每次重新渲染组件时重新初始化为空字符串

请注意，您可以使用

async/await

来提高代码的易读性

以下代码在每次更新后正确设置变量的正确值：

  const [rubro1, setRubro1] = useState("");
  const [rubro2, setRubro2] = useState("");

  const [thereIsRubros, setThereIsRubros] = useState(false);

  useEffect(() => {
    getItem("rubro1").then((res) => {
      if (res != null || res != undefined) {
        setRubro1(res);
        setThereIsRubros(true);
        getItem("rubro2").then((res) => {
          if (res != null || res != undefined) {
            setRubro2(res);
          }
        });
      }
    });
  }, []);

  if (thereIsRubros) {
    if (rubro1 != "" && rubro2 == "") {
      return; // do stuff
    }
  }

---

如果要在每次设置新值时更新组件，则必须使用

useState

，如果不想在每次设置新值时更新组件，但希望在重新渲染之间保留一个值，则必须使用

useRef

如果您现在这样做，

rubro1

和

rubro2

将在每次重新渲染组件时重新初始化为空字符串

请注意，您可以使用

async/await

来提高代码的易读性

以下代码在每次更新后正确设置变量的正确值：

  const [rubro1, setRubro1] = useState("");
  const [rubro2, setRubro2] = useState("");

  const [thereIsRubros, setThereIsRubros] = useState(false);

  useEffect(() => {
    getItem("rubro1").then((res) => {
      if (res != null || res != undefined) {
        setRubro1(res);
        setThereIsRubros(true);
        getItem("rubro2").then((res) => {
          if (res != null || res != undefined) {
            setRubro2(res);
          }
        });
      }
    });
  }, []);

  if (thereIsRubros) {
    if (rubro1 != "" && rubro2 == "") {
      return; // do stuff
    }
  }

---

请阅读如何创建最小示例，以便我们可以帮助您。请阅读如何创建最小示例，以便我们可以帮助您。谢谢@Lars。如何使用useRef？@JAOdev hooks上的react指南有一个很好的解释，而且比我在一个小评论中能得到的要好。但基本上，您可以使用

const rubro1Ref=useRef（“”）

创建一个ref，然后使用它并通过

current

键设置它：

rubro1Ref.current='new value'

当我们不想渲染时是否建议使用useRef？这是因为渲染会消耗资源？@JAOdev它不仅关系到性能，还关系到代码是否能清楚地传达其意图。如果不需要重新渲染，那么，不要使用

useState

，这不仅是因为性能受到了影响，而且因为它更清晰，并且您希望代码做什么（在这种情况下不做什么），谢谢@Lars。如何使用useRef？@JAOdev hooks上的react指南有一个很好的解释，而且比我在一个小评论中能得到的要好。但基本上，您可以使用

const rubro1Ref=useRef（“”）

创建一个ref，然后使用它并通过

current

键设置它：

rubro1Ref.current='new value'

当我们不想渲染时是否建议使用useRef？这是因为渲染会消耗资源？@JAOdev它不仅关系到性能，还关系到代码是否能清楚地传达其意图。如果不需要重新渲染，则不要使用

useState

，这不仅是因为性能受到影响，而且因为它更清晰，以及您希望代码执行（或不执行）什么操作