代码之家 › 专栏 › 技术社区 › xiaolingxiao

react.js异步从'componentwillmount'上的数据库获取资产

asynchronous reactjs ajax javascript

xiaolingxiao · 技术社区 · 6 年前

我正在编写一个react组件,在导航中,组件应该 get 一些 json 从数据库 async 态度。目前我的代码是

    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 两次,两次 异步 前缀一次,不带 await User.getName() 调用后端,一次调用后端。当我调用后端时,收到错误:

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

这是因为我初始化了 name 成为 false 在里面 constructor 。本质上,组件是在不等待异步调用结束的情况下挂载的,即使我是 await 响应来自 荷兰语 . 如何确保在 异步 打电话?

1 回复 | 直到 6 年前

Arman Charan 6 年前

只需提供 render() 用某种方法 return 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>