追加Reactネイティブコンポーネントが再レンダリングされない

Question

DOMオンクリックでReact Nativeコンポーネント（「Card」という名前）を削除する関数を作成しようとしていて、同じクラスの新しい「Card」を異なるプロパティで追加しようとしています。たとえば、両方のカードに背景色があります。最初のカードが緑色の場合、青色の背景になるはずの2枚目のカードは、元のカードの緑色の背景を継承します。作品removeCard、：

class SetProject extends Component { 

    constructor(props) { 
    super(props); 
    this.state = { 
     cardArray: [{backgroundColor: 'green', img: require('~/SetProject/cardImages/ovals/1-red-empty-oval.png')}] 
    } 
    } 

    removeCard(){ 
    let emptyArray = []; 
    this.setState({cardArray: emptyArray}); 
    } 

    changeCard(){ 
    // let emptyArray = []; 
    // this.setState({cardArray: emptyArray}); 
    let newCardArray = [{backgroundColor: 'red', img: require('~/SetProject/cardImages/ovals/1-purple-shaded-oval.png')}] 
    this.setState({cardArray: newCardArray}); 
    } 

    render() { 
    let cardElementArray = this.state.cardArray.map(theCard => { 
     return (
     <Card card={theCard}></Card> 
    ); 
    }); 

    return (
     <View> 
     <View> 
      {cardElementArray} 
     </View> 
     <TouchableHighlight> 
      <Text onPress={this.removeCard.bind(this)}>Remove Card</Text> 
     </TouchableHighlight> 
     <TouchableHighlight> 
      <Text onPress={this.changeCard.bind(this)}>Change Background</Text> 
     </TouchableHighlight> 
     </View> 
    ); 
    } 
} 

だから私は2つのボタンが持っている：

class Card extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
    style: { 
    backgroundColor: this.props.card.backgroundColor 
    } 
    }; 
} 

render() { 
    return (
    <TouchableHighlight style={this.state.style}> 
     <Image source={this.props.card.img} /> 
    </TouchableHighlight> 
) 
} 
} 

主成分次のようになります。そうは次のように

カードは、小道具として渡された彼らの背景色を受け取ります素晴らしい、そしてchangeCard。 「Remove Card」を押して「Change Card」を押すと、私が探している正確な結果が表示されます。カードは取り外され、新しいカードに交換されます。しかし、私はchangeCardに次の行にコメントしている場合：

// let emptyArray = []; 
// this.setState({cardArray: emptyArray}); 

を押し、「変更カード」を押さずに「カードを取り外し、」新しいカードは、新しいイメージを持っていますが、それは前のカードの背景色を保持します。これはchangeCardからthis.removeCard（）を呼び出す場合にも発生します。

要約すると、これらの機能の両方の動作を同時に実行できるようにしたいと思いますが、両方のボタンを別々に押すと、カードを取り外して正しくレンダリングされた新しいカードを追加できます。

どのようなアイデアも大歓迎です！

Answer 1

ここでは、イメージを設定するのにスタイルを設定しないために小道具を使用しています。小道具も使用できます。コンストラクタでスタイルを設定しました。次にスタイルを変更したいが、コンストラクタは再度呼び出されずに新しいオブジェクトを作成する。 あなたがカードにidプロパティをより複雑に追加されますカードの場合のプロパティでより良い実施のためだけでなく

render() { 
     return (
     <TouchableHighlight style={this.props.card.style}> 
      <Image source={this.props.card.img} /> 
     </TouchableHighlight> 
    ) 
    } 

STYLを設定小道具を使用することができます。不要なレンダリングも無視されるように、componentWillReceivepropsを使用することができます。

[{ID： '1' のbackgroundColor： '赤'、IMG： 必要とする（ 'が〜/ SETPROJECT/cardImages /楕円/ 1紫色シェーディング-oval.png'）}]

class Card extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
    style: { 
    card: this.props.card 
    } 
    }; 
} 

componentWillReceiveProps(nextProps){ 
    if(nextProps.card.id != this.state.card.id) 
    { 
    setState({card:nextProps.card}) 
    } 
} 

render() { 
    return (
    <TouchableHighlight style={this.state.style}> 
     <Image source={this.props.card.img} /> 
    </TouchableHighlight> 
) 
} 
} 

https://facebook.github.io/react/docs/react-component.html#componentwillreceiveprops

Answer 2

あなたは、配列のキーを逃すに関する警告はいけませんか？各カードのユニークな識別子（または最後の手段として配列内のインデックス）を使用して、配列の各項目にkey propを設定します。こうすることで、配列内のカードが変更されたときに、それに新しいカードがあるので、反応して反応を再現することができます。

let cardElementArray = this.state.cardArray.map(theCard => { 
    return (
    <Card key={theCard.id} card={theCard}></Card> 
); 
}); 

React docsのhereについては、こちらをご覧ください。