Question

我想要一个具有不同列表视图的单个页面。我在setState中使用样式不会更新为更改不同的视图，如grid，large，mid，..

var width = Dimensions.get('window').width - 20;
var page = 6;

class FeedUserGrid extends Component {
constructor(props) {
   super(props);
    var ds = new ListView.DataSource({
      rowHasChanged: (r1, r2) => r1 != r2
    });
    this.state = {
      dataSource:ds,
      searchString:'',
      search_result:PropTypes.node,
      test_item:PropTypes.node,
      loaded: false,    
     width: (width / 3),
    height:( width / 3) ,
    backgroundColor:'#ededed',
    marginTop:5,
    marginBottom:5,
    marginRight:5,
    marginLeft:5,
    alignItems:'center',
    borderRadius:10,
    borderColor:'black',
    borderWidth:0.1,

  };

}

fetchDataPhoto() {

    fetch('https://Example.com/..........')
      .then((response) => response.json())
      .then((responseData) => {
        this.setState({
          search_result:responseData,
          'loaded': true

        });

        this.setState({
          dataSource:this.state.dataSource.cloneWithRows(this.state.search_result),
        });
      })
      .done();

  }


  renderRow(rowData){
    return (
      <View style={{
    width: this.state.width,
    height: this.state.height,

      }}>
              <View style={ styles.s }>

               <Text style={styles.price}>userId:{rowData.userId}</Text>
              <Text style={styles.Itemtitle}>id:{rowData.id}</Text>
              <Text style={[styles.Itemtitle]}>title:{rowData.title}</Text>
              </View>

            </View>
    )
  }


   renderScene(route, nav) {



<ScrollView ref="scrollView" style={{flex: 1, position:'absolute',top:50,left:0,right:0,bottom:50}} >
                {
                    this.state.loaded && 


                <ListView         
             contentContainerStyle={{        
             flex: 1,
             flexDirection: 'row',
             flexWrap: 'wrap',
             justifyContent: 'center',
             alignItems:'center'  
                  }}
                dataSource={this.state.dataSource}
                renderRow={this.renderRow.bind(this)}/>
                }
                </ScrollView>

          // handling event ChangeItemSize, I need different view I writen below.

         <TouchableOpacity onPress={this.changeItemSize.bind(this)}>
         <View style={[styles.selectedItemView]}>
         <Icon name="cutlery" style={[styles.iconItemSetting,styles.navBarBottomIcon,styles.selectedItem]} />
         </ View>
         </ TouchableOpacity>
   }


    // different view for updating setState Style changing hight and width


 changeItemSize(){
      page+=1
      if(page == 11){
        page = 6;
      }

    switch (page) {  
            case 6:
            this.setState({
        width: width / 3 - 20,
        height: width / 3 - 20,  
           });
            break;
            case 7:

            this.setState({
        width: width / 1,
        height: width / 4 - 20, 

         });
            break;
            case 8:

             this.setState({
             width: width / 1,
        height: width / 3,

     });
            break;
            case 9:

             this.setState({
        width: width / 1,
        height: width / 2,   

            });
            break;
            case 10:

             this.setState({
        width: width / 1,
        height: width / 1.3,
           });
            break;
            default:

             this.setState({
        width: width / 3 - 20,
        height: width / 3 - 20,
           });
            break;
       }


    }

Answer 1

我不确定你打算做什么，但我认为你的一个问题是数据没有被设置为状态？

尝试更新fetchDataPhoto方法，如下所示：

fetchDataPhoto() {
  fetch('https://Example.com/..........')
    .then((response) => response.json())
    .then((responseData) => {
      this.setState({
        search_result: responseData,
        dataSource: this.state.dataSource.cloneWithRows(responseData),
        loaded: true
      });
  })
  .done();

}

问题是setState以异步方式运行，当您尝试获取search_result时，状态尚未存在，因此您获得了null值。

此外，您要覆盖dataSource，您应该定义一个不同的名称，以避免在数据加载时覆盖它。

您可以在代码中改进许多其他内容，但我认为根据我提议的更改，您将能够看到项目列表。

祝你好运！

Answer 2

我遇到了同样的问题，我通过这种方式设置状态来解决它：

this.state = {
  ...this.state,
  search_result:responseData,
  'loaded': true
}

基本上，我将状态设置为一个新对象，这没关系，完全有效。

处理不同列表视图的事件时，setState不会更新

2 个答案: