我们如何在React Hooks的useEffect中检查布尔值？

Question

我收到了布尔值并将其设置为setNomStatus，但如何检查它是否为真以显示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();
  }, []);

- soccerway

Answer 1

您可以添加另一个useEffect来观察此更改，useEffect需要第二个参数，即依赖项数组，如果任何依赖项数组值更改，则会调用该效果。

在这种情况下，由于您需要根据nomStatus做出决策，因此可以将其添加为useEffect的依赖项。

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

- Shyam

Answer 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();
}, []);

或者你可以使用第二个 useEffect 钩子，依赖于 nomStatus 状态更新来设置 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]);

- Drew Reese