不变违规：App（...）渲染未返回任何内容

Question

I am trying to render component based on the promise from AsyncStorage and I am getting this error:

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

I know for sure the components are good because I tried to render each of them individually and they're both worked just fine, it's when Im trying to render it through AsyncStorage.getItem I cant make it done.

CODE:

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() 
    ) 
}

When I did :

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

It worked great!

Also when I did:

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

It worked as well, so the functions are good, is the logic or something at the top one that I can't make work.

Answer 1

AsyncStorage is asynchronous, so it doesn't immediately return the view you have written. You need to display a spinner or a custom view until AsyncStorage has retrieved your data.

Here's a solution:

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>
        )
    }
}

Answer 2

Well, checkToken is a function that:

• calls AsyncStorage
• returns undefined

So if the logs tell you that render returned nothing, the logs are right!

You should add a return statement to your checkToken.

Then I suppose we should get to part 2, now check token is a function that:

• calls AsyncStorage
• returns a Promise that the executed function will be returned

It does not really work... React renders components, not promises!

My take is that you need to refactor how this works. My suggestion:

• refactor checkToken into a function that, if getItem succeeds, calls setState({ content: })
• if it fails, setState({ content: null })
• in your render function, do not return the function call. Instead, return state.content
• IF you want to check the token AT EVERY RENDER, call checkToken just before returning state.content from render.
• IF you want to check the token just once, call checkToken in componentDidMount instead - or wherever you need.

This is a sample of what I think the code should look like. You should think about what's the best place to call checkToken.

  checkToken = () => {
    let self = this;
    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) => {
      self.setState({
        content: (<View style={styles.container}> 
          {!token ? self.renderUser() : self.renderApp()} 
        </View>)
      });
    })
    .catch((err) => {
      self.setState({ content: null })
      console.log(err)
    })
  }
render() {
  //are you sure you need to call checkToken here? Maybe there's a better place? if there is no shouldComponentUpdate this could cause an infinite re-render loop
  //you could maybe call it for componentDidMount, or some other lifecycle method?
  //otherwise I think you'll need that shouldComponentUpdate implementation.
  this.checkToken();
  return this.state.content;
}

Answer 3

Please use state to store the token first. (The method you have 'checkToken' is a void method)

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

      render () {
        const { token } = this.state;
        return (
          <View style={styles.container}> 
              {
                !token 
                  ? this.renderUser() 
                  : this.renderApp()
               } 
          </View>
        )
      }