useState set调用不反映应用程序首次呈现前的更改

Question

新的反应挂钩和不确定如何解决。我在下面的App.js文件中有以下代码片段。

我基本上试图实现的是通过调用getUser（）函数让用户登录，一旦我有了用户标识，然后通过调用用户的函数check UserAccess（）来检查他们是否是授权用户ID.

根据validis数组中的结果，我检查它是否为真，并通过setauthorized（）调用将authorized state设置为真或假。

我的问题是，我需要先处理这个过程，然后在我的App.js文件中执行我的第一次渲染。

现在，它说我没有被授权，即使我是。

任何人都可以帮助我做错事，因为我需要确保在应用程序的第一个组件呈现之前正确设置authorizeduseState，即path=“/”

const [theId, setTheId] = useState('');
const [authorised, setAuthorised] = useState(false);


  const checkUserAccess = async (empid) => {
    try {
      const response = await fetch("http://localhost:4200/get-valid-users");
      const allUsers = await response.json();

      const validIds = allUsers.map(({ id }) => id);
      const isAuthorised = validIds.includes(empid);

      if (isAuthorised) {
        setAuthorised(true)
      } else {
        setAuthorised(false)
      }
    } catch (err) {
      console.error(err.message);
    }
  }  
    
    const getUser = async () => {
        try {
          const response = await fetch("http://localhost:4200/get-user");
          const theId= await response.json();
          
          setTheId(theId);
          checkUserAccess(theId);
    
        } catch (err) {
          console.error(err.message);
        }
      }
    
     useEffect(() => {
        getUser();
      }, []);  

Answer 1

这样它应该可以工作，但请记住，只有当状态中的id存在时，您才必须呈现您的应用，这意味着您的用户被正确地获取。

const [state, setState] = useState({ theId: '', isAutorized: false })    
const getUser = async () => {
  try {
    const idResp = await fetch("http://localhost:4200/get-user");
    const theId = await idResp.json();
    const authResp = await fetch("http://localhost:4200/get-valid-users");
    const allUsers = await authResp.response.json();

    const validIds = allUsers.map(({ id }) => id);
    const isAuthorised = validIds.includes(theId);
    setState({ theId, isAuthorised })
  } catch (err) {
    console.error(err.message);
  }
}

useEffect(() => {
   getUser();
}, []);

if (!state.theId) return <div>Loading</div>;

if (state.theId && !isAuthorized) return <AccessNotAllowed />

return <Home />

Answer 2

除非您希望在获取用户ID后进行部分渲染，然后获取访问级别。没有理由拥有多个useState/useEffect。

只需获取您的用户，然后获取您的访问级别并使用它。

下面是一个例子。

const [user, setUser] = useState(null);

const checkUserAccess = async (empid) => {
  const response = await fetch("http://localhost:4200/get-valid-users");
  const allUsers = await response.json();
  const validIds = allUsers.map(({ id }) => id);
  const isAuthorised = validIds.includes(empid);
  return isAuthorised;
}  
    
const getUser = async () => {
  try {
    const response = await fetch("http://localhost:4200/get-user");
    const theId= await response.json();
    const access = await checkUserAccess(theId);
    setUser({
      theId,
      access
    });
  } catch (err) {
    console.error(err.message);
  }
}
    
useEffect(() => {
  getUser();
}, []);  

if (!user) return <div>Loading</div>;

return <>{user.theId}</>