2017-07-12 13 views
0

データブロブを変更ネイティブ状態値を第二反応にconsole.log(this.state.dataSource)が私にデータブロブを与えてくれは、最初にconsole.log(this.state.dataSource)のランダム

[ { date: '2017-07-13', 
     images: 
     [ { image: 'assets-library://asset/asset.JPG?id=8855847A-7157-4D04-8E71-43746BED3E2E&ext=JPG', 
      selected: false } ], 
     key: 0 }] 

を与えます:あなたが見ることができるように

[ { date: '2017-07-13', 
     images: 
     [ { image: 'assets-library://asset/asset.JPG?id=8855847A-7157-4D04-8E71-43746BED3E2E&ext=JPG', 
      selected: true } ], 
     key: 0 }] 

、私はそれが何らかの形で、私の機能もthis.state.dataSourceの値に影響を及ぼしていることがいかにthis.state.dataSource、の値を変更するには、この機能でSETSTATEをしたことはありませんか?その状態値を直接操作が原因このライン

tempImages[index].selected = !tempImages[index].selected 

_にありそうです

setSelected(date,index,value){ 
    console.log(this.state.dataSource) 
    let tempArray = data 
    let tempImages = [] 
    for(var i in tempArray){ 
     if(tempArray[i].date == date){ 
      tempImages = tempArray[i].images 
     } 
    } 
    console.log(tempImages) 
    tempImages[index].selected = !tempImages[index].selected 
    console.log(tempImages) 
    console.log(this.state.dataSource) 
} 

編集:

sortPhotos(value){ 
    let tempArray = [] 
    for(var i in value){ 
     let found = false 
     for(var e in tempArray){ 
      if(tempArray[e].date == moment(value[i].node.timestamp*1000).format('YYYY-MM-DD')){ 
       found = e 
      } 
     } 
     if(!found){ 
      tempArray.push({ 
       date: moment(value[i].node.timestamp*1000).format('YYYY-MM-DD'), 
       images: [{image: value[i].node.image.uri, selected: false}], 
       key: tempArray.length 
      }) 
     }else{ 
      let images = tempArray[found].images 
      images.push({ 
       image: value[i].node.image.uri, 
       selected: false 
      }) 
      tempArray[found].images = images 
     } 
    } 
    this.setState({ 
     dataSource: this.state.dataSource.cloneWithRows(tempArray), 
     dataSourceClean: tempArray, 
     loaded: true 
    }) 
} 

setSelected(date,index,value){ 
    let tempArray = this.state.dataSourceClean 
    let tempImages = [] 
    for(var i in tempArray){ 
     if(tempArray[i].date == date){ 
      tempImages = tempArray[i].images 
     } 
    } 
    tempImages[index].selected = !tempImages[index].selected 
    console.log(this.state.dataSource) 
} 
+1

'tempImages [index] .selected =!tempImages [index] .selected'。はい、そうです。オブジェクトがjs内の参照によって格納されるので、内部状態オブジェクトを変更しています –

+0

はい、私は突然変異を持っていることに気付きました。より多くのコードで質問を編集しました。私はそれを修正して突然変異を取り除くことができますか?私はオブジェクト/参照を扱う方法がわかりません –

+0

これは、不変性がReact開発者の間で非常に普及しているためです。つまり、直接プロパティを割り当てないほうがいいので、オブジェクト参照から変更しないでください。 (例えば 'let foo = {... bar、newprop:true};')は、これを行うには偉大な(しかし浅い)方法です。 btwはブロブではなく、 'dataSource'は州の小道具の悪い名前です。もちろんそれはデータです。 –

答えて

0

あなたの配列とdataSource、そのクローンをクローニングされますtempArrayへの参照を使用して行われるので、tempArrayに変更を加えたときはいつでも、それらの変更はdataSourceに反映されます。あなたは、あなたのコード内でこのような何かをする必要があります:

dataSource: this.state.dataSource.cloneWithRows([...tempArray])

私たちが[...tempArray]でやっていることは、我々はtempArrayに関連付けられない方法であるtempArrayのコピーを渡しているということである、tempArrayであなたが行ったすべての変更dataSourceに反映されません。 Javascriptの文字列で

PS

  • アレイ、オブジェクト、日付を参照(同じオブジェクトを指す)として割り当てられ、一方、番号が値(新しいコピー)を使用して割り当てられます。
  • ...は、ES6で導入されたスプレッド演算子です。ここでそれについてもっと学ぶことができます。Spread Operator
関連する問題