Блог

Главная - Вопросы по программированию - Как мы проверяем логическое значение в useEffect в крючках react?

Как мы проверяем логическое значение в useEffect в крючках react?

#reactjs #react-hooks #use-effect #use-state

Вопрос:

Я получил boolean значение и установил значение 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();
  }, []);

введите описание изображения здесь

Ответ №1:

Вы можете добавить еще один эффект использования, который отслеживает это изменение, эффект использования принимает второй аргумент, которым является массив зависимостей, и эффект вызывается, если изменяется какое-либо значение массива зависимостей .

В этом случае , поскольку вам нужно принять решение на основе nomStatus , вы можете добавить его в качестве зависимости к вашему эффекту использования

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

Ответ №2:

Вы не можете, так как обновления состояния реакции обрабатываются асинхронно, 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]);
Метки: