javascript - setState fires and render method gets hit, but nothing rerenders

Question

I have this screen under a DrawerNavigator:

class myScreen extends Component {
    state: Object;

    constructor(props) {
        super(props);

        this.getBeers();

        this.state = {
            is_loading: true,
            beers: null,
            beers_ds: null,
        }
    }

    componentWillUpdate(nextProps: Object, nextState: Object)
    {   
        if(!nextState.is_loading)
        {
            let ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
            nextState.beers_ds = ds.cloneWithRows(nextState.beers);
        }
    }

    async getBeers()
    {

        let finalApiURL = API_BASE_URL;

        let fetchResult =  await fetch(finalApiURL) 
        let Result =  await fetchResult.json(); 

        this.setState({users: Result, is_loading: false});
    }

    render() 
    {
        if(this.state.is_loading)
        {
            return(
                <View style={{ flex: 1, backgroundColor: 'white', marginTop: 50 }}>
                    <Text>
                        Loading ...
                    </Text>
                </View>
            )
        }
        else 
        {
            let renderRow = (row) => {
                return (
                    <TouchableOpacity onPress={ () => {} }>
                        <View >
                            <Text>{row.name}</Text>
                            <Text style={{ color: 'blue' }}>ADD</Text>
                        </View>
                    </TouchableOpacity>
                );
            }

            return 
            (
                <View >
                    <ListView dataSource={this.state.beers_ds} renderRow={renderRow.bind(this)} />
                </View>
            ); 
        }
    } 

} 

export default myScreen;

Now when I get results back from the server, I setState(). Then, componentWillUpdate() gets called, and the else() statement in render() fires.

But my screen does not change and it stays on Loading ...

And sometimes I get see this error:

Can anyone help in finding why this weird behavior is occurring?

Thanks

EDIT:

It works when I change this:

return 
(

To this:

return (

Welcome to Javascript!

Answer 1

I will assume that you have the latest react native so ListView is deprecated you can use FlatList (Dod) instead

change your code to be like this

renderRow = (row) => {
   return (
      <TouchableOpacity onPress={ () => {} }>
          <View >
              <Text>{row.name}</Text>
              <Text style={{ color: 'blue' }}>ADD</Text>
          </View>
      </TouchableOpacity>
  );
}
render() {

      return(
          <View style={{ flex: 1, backgroundColor: 'white', marginTop: 50 }}>
            {this.state.is_loading ?
              <Text>
                  Loading ...
              </Text>
              :
              <FlatList data={this.state.users} renderItem={(item) => this.renderRow(item)} />
            }
          </View>
      );
}