Question

React Hooks 新手，不确定如何解决。我在下面的 App.js 文件中有以下代码片段。

我基本上想要实现的是通过调用 getUser() 函数让用户登录，一旦我有了用户 ID，然后通过调用函数 {{1} 检查他们是否是授权用户} 用于用户 ID。

根据 checkUserAccess() 数组中的结果，我检查它是真还是假，并通过 validIds 调用将授权状态设置为真或假。

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

目前，它说我没有被授权，即使我是。

任何人都可以协助我做错什么，因为我需要确保在应用程序的第一个组件呈现之前正确设置 setAuthorised() useState，即 path="/"

authorised

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}</>

useState set 调用不会在第一次呈现应用程序之前立即反映更改

2 个答案: