reactjs - React 16.4 基于 Promise 的条件渲染

Question

我正在尝试有条件地呈现一段代码。条件 canProject 可以为 true 或 false。这是使用 checkRole() 函数进行评估的。

问题是 checkRole() 返回一个 promise 。返回 promise 时，内容已经呈现。

如何使用 checkRole() 有条件地呈现代码块？请注意，我在 html 代码中的很多地方都使用了 canProject 条件，因此我想在 return ( 中根据需要通过添加 {可以项目 &&

render() {

  const canProject = checkRole('project'); //this returns a promise

  return (
    <div>
      <div className="row">
        {canProject &&
          <div className="col-lg-4">
          </div>
        }
      </div>
    </div>
  );
}

Answer 1

跟踪 promise 的状态:

this.state = {
  promiseFulfilled: false
}

const canProject = checkRole('project').then(() => this.setState({promiseFulfilled: true}))

render() {

  const { promiseFulfilled } = this.state

  if (promiseFulfilled) {
    return (
      <div>
        <div className="row">
          {canProject &&
            <div className="col-lg-4">
            </div>
          }
        </div>
      </div>
    )
  } else {
    return null
  } 
}

为了后代:这是使用 hooks 对较新版本的 React(版本 >16.8)执行此操作的正确方法:

const [ promiseFulfilled, setPromiseFulfilled ] = useState(false)

const canProject = checkRole('project').then(() => setPromiseFulfilled(true))

render() {

  if (promiseFulfilled) {
    return (
      <div>
        <div className="row">
          {canProject &&
            <div className="col-lg-4">
            </div>
          }
        </div>
      </div>
    )
  } else {
    return null
  } 
}