Question

我正在编写一个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，两次都使用async前缀。一次不使用await User.getName()调用后端，一次使用后端调用。当我打电话给后端时，我收到错误消息：

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

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

Answer 1

只需向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>

React.js从`componentWillMount`上的数据库异步获取资产

1 个答案: