React-为什么函数忽略等待？

Question

我的目标是在以前的功能完成时逐个执行这些功能，并在进行这些功能的同时激活某种加载。

相反，可见，所有功能都将忽略此可加载组件之后的进程。

为什么会发生这种情况，并且在完成前一个功能后我将如何实现该功能？我正在尝试在componentDidMount()中完成所有这些操作。我有@babel依赖v7 +。

在控制台中可见，该异步/等待功能将被忽略，并且可加载组件在所有功能启动之前就已完成。

编辑：更可重现的示例：

“ base_coponent”（扩展了React.Component的已定义LoadableComponent）

export class LoadableComponent extends React.Component {
constructor(props) {
    super(props)
    this.state = {
        loading: true,
        loading_counter: 0
    }
}

activateLoad() {
    let i = this.state.loading_counter
    console.log("setting loading", this.state)
    this.setState({loading: true, loading_counter: i + 1 }, function () {
        console.log("after setting loading counter", this.state)
    })
}

deactivateLoad() {
    let i = this.state.loading_counter
    console.log("in deactivateLoad", this.state)
    if (i == 1) {
        console.log("disabling loading")
        this.setState({ loading: false, loading_counter: 0 })
    } else if (i <= 0) {
        console.log("disabling loading")
        this.setState({ loading: false, loading_counter: 0 })
    } else {
        console.log("setting loading")
        this.setState({ loading: true, loading_counter: i - 1 })
    }

}

用户操作（从中导出函数getAppuser（）和其余函数）

export function getAppuser(appuser) {
return dispatch => { 
    let url = `${config.server}/fs/data/getAppuser/${appuser}`
    axios.get(url).then((data) => {

        dispatch({type: list.user.GET_APPUSER, data: data.data})            
    }).catch(
        err => {
            console.error(err)
        }
    )
}

“ index”（发生的地方。具体说来，类Content扩展了LoadableComponent）

1）定义的异步可加载

async loadable(b, e = (err) => { console.error(err) }) {
    this.activateLoad()
    try {
        await b()
        this.deactivateLoad()
    } catch (err) {
        this.deactivateLoad()
        e(err)
    }
}

2）componentDidMount（）

this.loadable(async () => {

      try {

        console.log("start of Loadable")

        await this.props.dispatch(getAppuser(appuserID))
        await this.props.dispatch(getSettings(appuserID))
        await this.props.dispatch(getAppuserRank(period))

        console.log("in the end of Loadable")
      } catch (err) {

        console.log(err)
      }

  })

package.json只是所有依赖关系和开发依赖关系中的一部分，在我的情况下，其他一些教程认为这很重要

"devDependencies": {
"@babel/cli": "^7.0.0",
"@babel/core": "^7.0.0",
"@babel/plugin-proposal-class-properties": "^7.0.0",
"@babel/plugin-proposal-decorators": "^7.0.0",
"@babel/plugin-proposal-object-rest-spread": "^7.0.0",
"@babel/plugin-transform-runtime": "^7.9.6",
"@babel/polyfill": "^7.0.0",
"@babel/preset-env": "^7.0.0",
"@babel/preset-react": "^7.0.0",
"@babel/runtime": "^7.9.6",
"babel-loader": "^8.0.0",
"babel-plugin-add-module-exports": "^0.3.2",
"babel-plugin-react-html-attrs": "2.0.0",

控制台日志当我应用Bergeron主题的逻辑时-此控制台日志和我放在顶部的控制台日志之间的区别是，“设置加载计数器之后”的日志不再可见，这是不对的由我。

正在尝试1）尝试创建：用户操作中的新Promise。但是在这种情况下，我遇到了一个错误，即动作必须是普通对象。使用自定义中间件执行异步操作。

export function getAppuser(appuser) {
return new Promise(function (resolve, reject) {
    return dispatch => { 
        let url = `${config.server}/fs/data/getAppuser/${appuser}`
        axios.get(url).then((data) => {

            dispatch({type: list.user.GET_APPUSER, data: data.data})            
        }).catch(
            err => {
                console.error(err)
            }
        )
    }
})

Answer 1

可能dispatch不返回承诺。如果是这样，则无法基于传递给它的值进行解析（因为传递给dispatch的所有值都是undefined）。

您只能有用地await一个承诺。