javascript - React.js 从 `componentWillMount` 上的数据库异步获取 Assets

Question

我正在编写一个 react 组件，其中在导航时，该组件应该以异步方式从数据库中获取一些json。目前我的代码是

    constructor(props) {

        super(props);
        this.state = { name : false }

    }

    componentWillMount(){
        this.loadNameA()
        .then (_ => console.log('loaded NameContainer'))
        .catch(e => console.log(`Error ${e}`))
    }

在哪里

loadNameA = async () => {
    const val = await User.getName()
    // do some logic here
    this.setState({ name : val })
}

我运行函数 loadNameA 两次，两次都带有 async 前缀 一旦没有 await User.getName() 调用后端，一次调用后端。当我调用后端时出现错误:

Warning: Failed prop type: Invalid prop `value` supplied to `Editor`, expected a Slate `Value` but received: false

这是因为我在constructor中将name的值初始化为false。本质上，即使我正在 awaiting 来自 loadNameA 的响应，组件也没有等待异步调用结束就安装了。如何确保在 async 调用后组件已挂载并正确解析其状态？

Answer 1

只需为您的render() 方法提供一些东西来返回 if (!this.state.name)。

请参阅下面的实际示例。

// App.
class App extends React.Component {

  // State.
  state = {name: false}
  
  // Render.
  render = () => <div>{this.state.name || 'Loading ..'}</div>
  
  // Did Mount.
  componentDidMount() {
    this.getName()
    .then(name => this.setState({name}))
  }
  
  // Get Name.
  getName = () => new Promise(r => 
    window.setTimeout(() => r('NAME'), 1000))
  
}

// Mount.
ReactDOM.render(<App/>, document.querySelector('#root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>