javascript - 不变违规 : App(. ..) 渲染器未返回任何内容

Question

我正在尝试根据 AsyncStorage 的 promise 呈现组件，但出现此错误:

Exception: Invariant Violation: App(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.

我确信这些组件是好的，因为我尝试单独渲染它们中的每一个并且它们都工作得很好，当我试图通过 AsyncStorage.getItem 渲染它时我无法做到它完成了。

代码:

checkToken = () => {
    AsyncStorage.getItem('user')
        .then((res) => {
            res = JSON.parse(res)
            console.log('this is checkToken()',res.token)
            // this.renderUserSection(res.token);
            return res.token;   
        })
        .then((token) => {
          return (
             <View style={styles.container}> 
                {!token ? this.renderUser() : this.renderApp()} 
             </View>
          )  
        })
        .catch((err) => {
          console.log(err)
        })
}



render() {
    return (
        this.checkToken() 
    ) 
}

当我这样做的时候:

render() {
    return (
        this.renderUser() 
    ) 
}

效果很好!

当我这样做的时候:

render() {
    return (
        this.renderApp() 
    ) 
}

它也很好用，所以功能很好，是逻辑还是最上面的东西我做不出来。

Answer 1

AsyncStorage 是异步的，因此它不会立即返回您编写的 View 。在 AsyncStorage 检索到您的数据之前，您需要显示微调器或自定义 View 。

解决方法:

constructor() {
    this.state = {
        token: null
    }
    this.checkToken();
}

checkToken = () => {
    AsyncStorage.getItem('user')
    .then((res) => {
      res = JSON.parse(res)
      console.log('this is checkToken()',res.token)
      // this.renderUserSection(res.token);
    })
    .then((token) => {
        this.setState({token: token})  
    })
    .catch((err) => {
      console.log(err)
    })
}

render() {
    if (this.state.token == null) {
       return (<View> {this.renderUser()} </View>)
    }
    else {
        return (
            <View style={styles.container}> 
               {this.renderApp()}
            </View>
        )
    }
}