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

尝试删除变量并仅使用costants

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

打字稿中的全局 let 变量

2 个答案: