React.js: setState üzerine yazılıyor, birleştirilmiyor

Question

Reaksiyon.js yazılımında oldukça yeniyim ve bir duvar tasarımı düzenleyerek deneme aşamasındayım.

Her öğeyi DOM'a yerleştiriyorum, sonra her öğenin üzerine dönmem ve önceki öğelere göre x ve y konumlarını uygulamam gerekiyor.

ilk modeli şöyle görünür:

[ 
    { 
    "title": "The Forrest", 
    "description": "some cool text", 
    "imgSmallSrc": "/img/img4-small.jpg", 
    "imgAlt": "Placeholder image", 
    "tags": [ 
     "Design", 
     "Mobile", 
     "Responsive" 
    ], 
    "date": 1367154709885, 
    "podStyle": { 
     "width": 253 
    } 
    } 
] 

(sadece kısa tutmak için bir öğe gösterdik).

Döngüyü tamamladıktan ve x ve y verilerimi aldığımda bunu podStyle nesnesine uygulamak istiyorum. Aşağıdaki verilerle setstate çağrı: Bu modelden tüm güncel verileri kaldırmak ve sadece podStyle verilerle beni terk etmek gibi görünüyor

[ 
    { 
    "podStyle": { 
     "x": 0, 
     "y": 0, 
     "height": 146, 
     "width": 253 
    } 
    } 
] 

. Bu birleşmenin nasıl çalıştığını yanlış anladım mı?

Yardımlarınız için şimdiden teşekkür ederiz!

Answer 1

sizin devlet bir nesne ise:

getInitialState: function() { 
    return { x: 0, y: 0 }; 
} 

söz konusu nesne üzerinde bireysel tuşları ayarlamak için setState kullanabilirsiniz:

this.setState({ x: 1 }); // y still == 0 

senin devletin hiçbir akıllı birleştirilmesi yapar vermek; örneğin, bu işe yaramazsa:

var newState = React.addons.update(this.state, { 
    point: { x: {$set: 10} } 
}); 
this.setState(newState); 

this JSFiddle bakınız: sonra

@ssorallen tarafından belirtildiği gibi

getInitialState: function() { 
    return { 
    point: { x: 0, y: 0 }, 
    radius: 10 
    }; 
} 

this.setState({point: {x: 1}}); 
// state is now == {point: {x: 1}, radius: 10} (point.y is gone) 

[Düzenle]

, sen sen etkiyi elde etmek the immutability helpers kullanabilirsiniz bir örnek için: http://jsfiddle.net/BinaryMuse/HW6w5/

Answer 2

Şun gibi bir şey:

01 o/özyinelemeli derin yerine ağaç kodlama zordu eğer

daha iyi olurdu, ama okuyucuya bu kadar bırakacaktır :)

Answer 3

birleştirilmesi sığ, böylece this.setState({point}) yapraklar (ed: bu. state.radius) sağlam, ancak tamamen değiştirir (ed: this.state.point).

https://facebook.github.io/react/docs/state-and-lifecycle.html#state-updates-are-merged

Object.assign() yerine transform-object-rest-spread kullanılarak, daha önce verilen yanıtlar bir ES7 + bakış açısı sunmak için:

class MyComponent extends React.Component { 
    state = { 
     point: { 
      x: 0, 
      y: 0, 
     }, 
     radius: 10, 
    } 

    handleChange =() => { 
     this.setState({ 
      point: { 
       // rest operator (...) expands out to: 
       ...this.state.point, // x:0, y:0, 
       y: 1, // overwrites old y 
      }, 
      // radius is not overwritten by setState 
     }); 
    } 

    render() { 
     // omitted 
    } 
} 

.babelrc

(aynı zamanda kargaşa önceden aşama 2 transform-class-properties gerektirir)

{ 
    "presets": ["es2015", "stage-2", "react"], 
    "plugins": ["transform-object-rest-spread"], 
}