reactjs - React - 在渲染之前等待 promise

Question

我无法弄清楚这一点，如果你能指出我正确的方向。在我的 NavMenu.js 上，我有登录(两个输入和一个提交按钮，我在上面调用 handleSubmit()
在 handleSubmit()我正在检查运行良好的用户登录凭据，但是在我确认登录后，我继续执行下一次获取以检查用户角色(并返回 promise )和应用程序中的可见性

Helper.js

function getAllRoles(formName, sessionVarName) {

    var roleData = [];
    var roleId = sessionStorage.getItem('UserLoggedRoleId');

    fetch('api/User/GetUserRole/', {
    'method': 'POST',
    headers: {
        'Accept': 'application/json, text/plain, */*',
        'Content-Type': 'application/json'
    },
    'body':
        JSON.stringify({
            'roleId': roleId,
            'formName': formName
        })
    }).then(roleResponse => roleResponse.json())
    .then(data => {
        sessionStorage.setItem(sessionVarName, JSON.stringify(data));
        roleData = data;
    });

  var result = Promise.resolve(roleData)

  return result;
}

function checkRoleVisibility(userRoles, role) {} <-- return true or false

export {
  getAllRoles ,
  checkRoleVisibility   
};

在 NavMenu.js 中

import { getAllRoles, checkRoleVisibility } from './common/Helper';

handleSubmit() {

 fetch('api/User/UserAuthentification/', 
 ....then(response => {
       if (response.ok) {
               this.setState(prevState => ({ userLogged: !prevState.userLogged }))

               response.json().then(value => {

               sessionStorage.setItem('UserLogged', true);
               sessionStorage.setItem('UserLabelSession', this.state.userLabel);
               sessionStorage.setItem('UserLoggedRoleId', value.userRole.roleID);

               getAllRoles('NavMenu', 'UserLoggedRoles')
                     .then(roleData => {
                            this.setState({
                                loggedUserRoles: roleData,
                                loading: false
                            });
                        });

               this.props.alert.success("Dobro dosli");
        })
   }
}

但问题来了，在 render()本身，我有一个控件 navBar其中调用

checkRoleVisibility(this.state.loggedUserRoles, 'SeeTabRadniNalozi')

来自助手，发送 this.state.loggedUserRoles作为参数，假设填入fetch from handleSubmit()但未定义，获取完成，设置 loading为 true，渲染完成，但不显示任何内容

我有 this.state.loading并基于它我显示控制......

    let navMenu = this.state.loading ? <div className="loaderPosition">
        <Loader type="Watch" color="#1082F3" height="200" width="200" />
    </div> : !this.state.userLogged ? logInControl : navBar;

如果我在 Controller 上放置一个断点，我可以看到我的方法正在被 getAllRoles 调用。功能，但我也可以看到应用程序继续渲染并且不等待 promise 返回 loggedUserRoles 的填充状态.

所以问题是，为什么在将加载设置为 true 之前，渲染既不等待我的角色获取也不等待 promise 解决？

我检查了这个答案 Wait for react-promise to resolve before render我把 this.setState({ loading: false });在 componentDidMount()但随后加载 div 显示为全时

Answer 1

从我看到和理解的是，你正在打电话

this.setState(prevState => ({ userLogged: !prevState.userLogged }))

如果响应没问题。这将导致 React 进行异步调用，以便在有时间时设置新状态。

但是你需要的资源来自

this.setState({
  loggedUserRoles: roleData,
  loading: false
});

每当您想设置时 userLogged对吧？

所以可能是 React 在你设置 loggedUserRoles 之前调用了 render但在 userLogged 之后设置为真。如果我理解正确，那会导致错误。

您可以简单地设置 userLogged像这样和其他人一起陈述:

this.setState({
  userLogged: true,
  loggedUserRoles: roleData,
  loading: false
});

编辑:

此外，您想更改 getAllRoles 中的 Promise 创建。你回来了

var result = Promise.resolve(roleData)

return result;

这将直接导致空数组，因为这是 roleData 的初始值。 .因此，您总是从该方法返回一个空数组，而不必担心获取的结果。

你有多种方法来解决这个问题。我更喜欢使用 async/await 的干净和可读的方式:

async getAllRoles(formName, sessionVarName){
  var roleId = sessionStorage.getItem('UserLoggedRoleId');

  const response = await fetch(...);
  const data = response.json();

  sessionStorage.setItem(sessionVarName, JSON.stringify(data));
  return data;

或者，如果您想继续使用 Promise:

function getAllRoles(formName, sessionVarName){
  return new Promise((resolve, reject) => {
    var roleId = sessionStorage.getItem('UserLoggedRoleId');

    fetch(...)
    .then(roleResponse => roleResponse.json())
    .then(data => {
      sessionStorage.setItem(sessionVarName, JSON.stringify(data));
      resolve(data);
    });