異なるリストビューのイベントを処理するときにsetStateが更新されない

Question

リストビューが異なる単一のページが必要です。私はあなたがやろうとしているかわからないんだけど、私はあなたの問題の一つは、ということだと思います

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

グリッドのような別のビューを変更するために更新されていないSETSTATEでスタイリングを使用し、大、中、...データが状態に設定されていませんか？

このよう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を取得しようとする時点で、それは、まだ状態で存在していないので、あなたが取得していますa null値。

また、dataSourceを上書きしているため、データが読み込まれたときに上書きしないように別の名前を定義する必要があります。

あなたのコードで改善できることは他にもたくさんありますが、私はあなたがアイテムのリストを見ることができるように提案しています。

幸運を祈る！

Answer 2

私は同じ問題を抱えていた、と私は、このように状態を設定することによってそれを解決：

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

は基本的に、私は新しいオブジェクトに状態を設定していて、それは大丈夫だと完全に動作します。