小编tin*_*ing的帖子

我在 React 中使用 uppy，它们通常将 uppy 初始化为全局变量。在 React 中，他们允许这样做：

class MyComponent extends React.Component {
  constructor (props) {
    super(props)
    this.uppy = Uppy()
      .use(Transloadit, {})
  }

  componentWillUnmount () {
    this.uppy.close()
  }

  render () {
    return <StatusBar uppy={this.uppy} />
  }
}

如何在带有钩子的功能组件中编写它？天真的方法如下（没想到在阅读此问题后它会起作用）：

const MyComponent = () => {
  const uppy = Uppy()
    .use(Transloadit, {})

  useEffect(() => {
    return () => uppy.close()
  })

  return <StatusBar uppy={uppy} />
}

PS：它需要在功能组件内部完成，因为我在一个uppy.use方法中使用了一些道具。

我现在花了几个小时来解决这个问题并阅读了无数的问题,但是所提供的解决方案都没有适合我,所以我现在要发布我的具体问题:

我想构建一个包含四列的行.前三列中有图片,第四列有文字描述,我想垂直居中显示(意思是顶部和底部有相同的边距,显然不是固定的,但是响应于改变的屏幕尺寸).这是代码:

<section>
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-4 col-sm-6">
                <img ...>
            </div>
            <div class="col-lg-4 col-sm-6">
                <img ...>
            </div>
            <div class="col-lg-3 col-sm-6">
                <img ...>
            </div>
            <div class="col-lg-1 col-sm-6">
                <div class="container-fluid">
                    <p>Some text that is supposed to be vertically centered within the column</p>
                </div>
            </div>
        </div>
    </div>
</section>

它必须对Bootstrap特定的类做一些事情,而不是基于CSS的解决方案,我可以在这个上找到它.如何在这个特定的例子中使它工作？您可以随意对此部分进行任何更改:

<div class="container-fluid">
    <p>Some text that is supposed to be vertically centered within the column</p>
</div>

但是,如果可能,结构的其余部分应保持不变(包括col-lg-1).

非常感谢您的帮助!

我已经阅读了很多关于异步等待的内容,但显然我仍然没有得到它.;-)

我试图将以下.then promise结构转换为异步等待:

componentDidMount() {
    const { store } = this.props

    Promise.all([
      API.fetchTodos(),
      API.fetchGoals(),
    ]).then(([ todos, goals ]) => {
      store.dispatch(receiveDataAction(todos, goals))
    })

    store.subscribe(() => this.forceUpdate())

    console.log('test')
}

我的结果是:

async componentDidMount() {
    const { store } = this.props

    const [todos, goals] = await Promise.all([
      API.fetchTodos(),
      API.fetchGoals(),
    ])

    store.dispatch(receiveDataAction(todos, goals))

    store.subscribe(() => this.forceUpdate())

    console.log('test')
}

结果是这个功能永远不会结束.它调用包括console.log在内的所有内容,但程序停止运行(没有错误).我没有向你展示应用程序的任何其他部分,因为根据我的理解,这两个函数应该是等价的 - 所以其余部分应该无关紧要.显然我错了!:-)我做错了什么,为什么我的解决方案不起作用？