setState 触发并且渲染方法被命中，但没有重新渲染

Question

我在 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;

现在，当我从服务器返回结果时，我 setState()。然后，调用 componentWillUpdate()，并触发 render() 中的 else() 语句。

但我的屏幕没有改变，一直保持 Loading ..。

有时我会看到这个错误：

任何人都可以帮助找出为什么会出现这种奇怪的行为吗？

谢谢

编辑：

当我改变这个时它起作用了：

return 
(

为此：

return (

欢迎来到Javascript！

Answer 1

我假设你有最新的 react native 所以 ListView 已被弃用你可以使用 FlatList (Dod) 代替

将您的代码改成这样

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

setState 触发并且渲染方法被命中，但没有重新渲染

setState fires and render method gets hit, but nothing rerenders

javascript

render

setstate

reactjs

react-native