親コンポーネントが反応で配列を更新しているときに、子コンポーネントが更新されない

Question

親反応コンポーネントにアイテムのリストがあり、新しいアイテムと更新アイテムが追加されています。子コンポーネントは小道具内のアイテムを受け取り、それをレンダリングします。

親状態が更新されると、子コンポーネントはその値を更新していません。 "componentWillReceiveProps"の子コンポーネント状態の状態を更新する必要がありますか？それを行う正しい方法は何ですか。

Code Example 
// parent component 
import React, { Component } from "react"; 
import TestList from '../controls/testlistview' 

export default class TestView extends Component { 
    constructor(props) { 
     super(); 
     this.state = { 
      items: [] 
     }; 
    } 

    render() { 
     return (<div> 
      <button onClick={this.addItem.bind(this)}> Add item</button> 
      <button onClick={this.changeFirstItemText.bind(this)}> Change item</button> 
      <TestList items={this.state.items} index={index}/> 
     </div>); 
    } 

    addItem() { 
     var items = this.state.items.map(s=> s); 

     items.push('new one'); 
     this.setState({ 
      items: items 
     }); 
    } 



    changeFirstItemText() { 
     var items = this.state.items.map(s=> s); 
     items[0] = "changed text"; 
     this.setState({ 
      items: items 
     }); 
    } 
} 



//Child component 
import React, { Component } from "react"; 

export default class TestList extends Component { 
    constructor(props) { 
     super(); 
     debugger; 
     this.state = { 
      rootNodes: props.items 
     }; 
    } 

    componentWillReceiveProps(nextProps){ 
     debugger; 
    } 

    render() { 
     var items = this.state.rootNodes.map((s) => { 
      return <div>{s}</div>; 
     }); 
     return <div>{items}</div>; 
    } 
} 

Answer 1

代わりの

render() { 
     var items = this.state.rootNodes.map((s) => { 
      return <div>{s}</div>; 
     }); 
     return <div>{items}</div>; 
    } 

あなたはあなたが再びtestlistという状態に小道具を割り当てる必要はありません小道具

render() { 
     var items = this.props.items.map((s) => { 
      return <div>{s}</div>; 
     }); 
     return <div>{items}</div>; 
    } 

から項目を取得し、そうでなければ、（SETSTATEを行う必要があります）をもう一度TestListから呼び出してレンダリングを再度トリガします。あなたは、コンポーネントの状態に小道具を割り当てるべきではありません（これはnecesaryステップではありません）testlistというクラスで

http://codepen.io/kossel/pen/ObQLoR

Answer 2

- これが反応に大きな問題を引き起こす確実な方法で、あなたの原因でありますここで問題を起こす。なぜこれが悪い考えであるのかについては、my answer hereを参照してください。

TestItemを次のように変更すると正常に動作します。

export default class TestList extends Component { 
    constructor(props) { 
     super(); 
     debugger; 
    } 

    componentWillReceiveProps(nextProps){ 
     debugger; 
    } 

    render() { 
     var items = this.props.items.map((s) => { 
      return <div>{s}</div>; 
     }); 
     return <div>{items}</div>; 
    } 
} 

Answer 3

理由は、子コンポーネントの状態によってui要素を作成しているということです。 この問題を解決するための2つの方法があります。
1.更新がcomponentWillReceivePropsの状態値（）この

componentWillReceiveProps(newProps){ 
     this.setState({ 
      rootNodes: newProps.items 
     }); 
} 

2.Createのような目的球this-

render() { 
    var uiItems = this.props.items.map((item) => { 
     return <div>{item}</div>; 
    }); 
    return (<div>{uiItems}</div>); 
} 

などの小道具値から直接UI要素