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()被调用，else()中的render()语句将被触发。

但是我的屏幕没有改变，它仍然停留在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 fires和render方法被命中，但没有重新渲染

1 个答案: