我们如何在 react hooks 中检查 useEffect 中的布尔值？答案

【问题标题】：How do we check the boolean value in useEffect in react hooks?我们如何在 react hooks 中检查 useEffect 中的布尔值？
【发布时间】：2021-10-27 02:17:19
【问题描述】：

我已收到 boolean 值并设置为 setNomStatus，但如何检查是否为 true 以显示 setShowCalender(true)？

const [nomStatus, setNomStatus] = useState(false);

  useEffect(() => {
    const fetchData = async () => {
      const email = localStorage.getItem("loginEmail");
      try {
        const res = await Axios.get(
          "http://localhost:8000/service/activeStatus", {email}
        );
        setNomStatus(res.data[0].status);
        console.log("Get status data :" + res.data[0].status);
        if(nomStatus == true){
          setShowCalender(true);
        }
      } catch (e) {
        console.log(e);
      }
    };
    fetchData();
  }, []);

【问题讨论】：

标签： reactjs react-hooks use-effect use-state

【解决方案1】：

您可以添加另一个 useEffect 来监视此更改，useEffect 接受第二个参数，即依赖数组，如果任何依赖数组值发生更改，就会调用效果。

在这种情况下，由于您需要根据 nomStatus 做出决定，您可以将其作为依赖项添加到您的 useEffect 中

useEffect(() => {
  if (nomStatus) {
    setShowCalender(true);
  }
}, [nomStatus]);

【讨论】：

【解决方案2】：

你不能因为 React 状态更新是异步处理的，nomStatus 状态更新直到下一个渲染周期才可用。使用res.data[0].status 值设置showCalendar 状态。

const [nomStatus, setNomStatus] = useState(false);

useEffect(() => {
  const fetchData = async () => {
    const email = localStorage.getItem("loginEmail");
    try {
      const res = await Axios.get(
        "http://localhost:8000/service/activeStatus",
        {email}
      );
      setNomStatus(res.data[0].status);
      console.log("Get status data :" + res.data[0].status);
      if (res.data[0].status){
        setShowCalender(true);
      }
    } catch (e) {
      console.log(e);
    }
  };
  fetchData();
}, []);

或者您可以使用依赖于nomStatus 状态更新的第二个useEffect 挂钩来设置showCalendar 状态。

useEffect(() => {
  const fetchData = async () => {
    const email = localStorage.getItem("loginEmail");
    try {
      const res = await Axios.get(
        "http://localhost:8000/service/activeStatus",
        {email}
      );
      setNomStatus(res.data[0].status);
      console.log("Get status data :" + res.data[0].status);
    } catch (e) {
      console.log(e);
    }
  };
  fetchData();
}, []);

useEffect(() => {
  if (nomStatus){
    setShowCalender(true);
  }
}, [nomStatus]);

【讨论】：