如何使用“useEffect”函数将“useState”函数中的第一个值设置为真或假答案

【问题标题】：How to set first value in "useState" function to true or false with "useEffect" function React如何使用“useEffect”函数将“useState”函数中的第一个值设置为真或假
【发布时间】：2022-02-26 16:59:44
【问题描述】：

我当前的代码遇到了问题。下面的代码应该从我的后端获取 JSON 响应，并根据后端的响应将 useState 函数中的“数据”设置为 true 或 false。我遇到的问题是，当我单击按钮将我重定向到页面时，它必须首先通过我的反应路由器中的这条受保护的路由。所以它会运行这个脚本，但“数据”的值永远不会改变。但是，我的 console.log 将根据从后端发送的 JSON 响应输出正确的布尔值。我对如何在页面加载时实际获取 JSON 响应并使用 useEffect 将其设置为“数据”感到困惑？据我了解，useEffect 只会在 DOM 重新渲染时更新我的 useState 'data'。

简而言之，我希望通过使用 axios 检查来自我的后端的 JSON 响应，在页面呈现时数据 = true，如果它是真的，我想被重定向到出口。

感谢您的帮助。

 const useAuth = () => {
    
      const [data, setData] = useState(false);
    
      useEffect(() => {
        const fetchAuthData = async () => {
          await axios.get('http://localhost:5000/auth')
            .then(resp => {
              console.log(resp.data)
              setData(resp.data);
            })
            .catch(err => {
              console.log(err);
              setData(false)
            });
    
    
        };
    
        fetchAuthData()
      }, []);
    
      console.log(data)
      // Logic to check if backEndResponse is true or false
      if (data === true) {
        const authorized = { loggedIn: true }
        return authorized && authorized.loggedIn;
      } else {
        const authorized = { loggedIn: false }
        return authorized && authorized.loggedIn;
      }
    
    };
    
    
    const ProtectedRoutes = () => {
      const isAuth = useAuth();
      return isAuth ? <Outlet/> : <Navigate to="/login" />;
    }

【问题讨论】：

我不明白这个问题。 fetchAuthData 是否没有发出 GET 请求并更新 data 状态？或者您是想说您的 ProtectedRoutes 布局组件需要等到 GET 请求被处理并更新状态？为什么useAuth 不只是返回data，它已经是一个布尔值了？
它正在发出 GET 请求，当我在代码的 .then() 部分中使用 console.log(resp.data) 时，它会显示正确的布尔值，但是当我使用 console.log(data ) 就在我的 if 语句上方，它总是显示为假。所以就像我发出 GET 请求时它没有更新数据的值。

标签： javascript reactjs react-router use-effect use-state

【解决方案1】：

好的，根据我对您的问题的理解，问题是ProtectedRoutes 布局组件使用初始data 状态，即false，并处理身份验证重定向在真正的 auth GET 请求被完全处理之前。

您应该使用第三种“不确定”状态来推迟呈现 Outlet 或重定向，直到确认身份验证状态。

例子：

const useAuth = () => {
  const [data, setData] = useState(); // <-- initially undefined

  useEffect(() => {
    const fetchAuthData = async () => {
      await axios.get('http://localhost:5000/auth')
        .then(resp => {
          setData(!!resp.data);
        })
        .catch(err => {
          console.log(err);
          setData(false)
        });
    };

    fetchAuthData()
  }, []);

  return data;
};

...

const ProtectedRoutes = () => {
  const isAuth = useAuth();

  if (isAuth === undefined) return null; // or loading indicator, etc...

  return isAuth ? <Outlet/> : <Navigate to="/login" replace />;
}

【讨论】：