typescript 中的全局变量

Question

我的缺点是，在 usingEffect 之后，rubro1 和 rubro2 的值没有改变。 即 rubro1 和 rubro2 的 useEffect 变化只在 useEffect 中受到影响。

有没有办法改变 useEffect 中的 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)
}
 }

Answer 1

尝试删除变量并仅与成本一起使用

请注意，我只使用了一个 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)
    }

此外删除if(res!=null || res!= undefined)只是做if(res) ，它会检查if(res!=null && res!= undefined)我猜是你的目标

Answer 2

如果您想在每次设置新值时更新组件，则必须使用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
    }
  }