反應道具語法 - 通過引用數組時遇到問題

Question

（編輯） 在下面的簡單示例中，我有一段時間的傳遞和訪問引用數組成員的道具的語法。

它是如何正確地處理作爲道具傳遞的對象數組的屬性？

我想通過參考，我不明白爲什麼我不能這樣做。

感謝

// Define a type constant 
const MyType { 
    constructor(props) { 
     this.state = { 
     panelNumber : 0, 
     panelDisplayMode : 'SINGLE' 
     } 
    } 
} 

// create a collection of those type constants 
class MyStore extends React.Component{ 

    MyCollection = []; 

    constructor() { 
     super(); 
    } 

    componentWillMount(){ 
     var nonsense = new MyType; 
     nonsense.panelNumber = 123; 
     nonsense.panelDisplayMode = "SINGLE"; 
     this.MyCollection.push(nonsense); 

     nonsense = new MyType; 
     nonsense.panelNumber = 456; 
     nonsense.panelDisplayMode = "DOUBLE"; 
     this.MyCollection.push(nonsense); 

     nonsense = new MyType; 
     nonsense.panelNumber = 789; 
     nonsense.panelDisplayMode = "TRIPLE"; 
     this.MyCollection.push(nonsense);   
    } 

    // pass one of the instances (array) of the collection to a component. 
    render() { 
     <div> 
      <MyComponent panel={this.MyCollection[2]} 
     </div? 
    } 
} 

// access one of the properties of the instance (array). 
const MyComponent = props => (
    <div> 
     <p>MODE:</p>{ props.panel.panelDisplayMode } 
    </div> 
); 

Answer 1

更新setState功能的狀態，並映射您的收藏數組單個集合傳遞給您的組件。這樣

class MyStore extends React.Component{ 
    constructor(props) { 
     this.state = { 
     MyCollection: [], 
     } 
    } 
    componentWillMount(){ 
     var myCollection = []; 
     var nonsense = new MyType; 
     nonsense.panelNumber = 123; 
     nonsense.panelDisplayMode = "SINGLE"; 
     myCollection.push(MyPanel); 

     nonsense = new MyType; 
     nonsense.panelNumber = 456; 
     nonsense.panelDisplayMode = "DOUBLE"; 
     myCollection.push(MyPanel); 

     nonsense = new MyType; 
     nonsense.panelNumber = 789; 
     nonsense.panelDisplayMode = "TRIPLE"; 
     myCollection.push(MyPanel); 

     this.setState({MyCollection:myCollection});   
    } 

    // pass one of the instances (array) of the collection to a component. 
    render() { 
     <div> 
      {this.state.MyCollection.map(
      singleCollection=>{ 
       <MyComponent panel={singleCollection}> 
      } 
     )} 
     </div> 
    } 
} 
// access one of the properties of the instance (array). 
const MyComponent = props => (
    <div> 
     <p>MODE:</p>{ props.panel.panelDisplayMode } 
    </div> 
); 

編輯

東西我一些固定一些它的工作原理語法錯誤後運行此代碼。你有任何具體的錯誤？通過下面的方法是代碼

class MyType { 
    constructor(props) { 
     this.state = { 
     panelNumber : 0, 
     panelDisplayMode : 'SINGLE' 
     } 
    } 
} 

// create a collection of those type constants 
export default class MyStore extends React.Component{ 
    MyCollection = []; 
    constructor() { 
     super(); 
    } 

    componentWillMount(){ 
     var nonsense = new MyType; 
     nonsense.panelNumber = 123; 
     nonsense.panelDisplayMode = "SINGLE"; 
     this.MyCollection.push(nonsense); 

     nonsense = new MyType; 
     nonsense.panelNumber = 456; 
     nonsense.panelDisplayMode = "DOUBLE"; 
     this.MyCollection.push(nonsense); 

     nonsense = new MyType; 
     nonsense.panelNumber = 789; 
     nonsense.panelDisplayMode = "TRIPLE"; 
     this.MyCollection.push(nonsense);   
    } 

    // pass one of the instances (array) of the collection to a component. 
    render() { 
     return(
      <div> 
       <MyComponent panel={this.MyCollection[2]}/> 
      </div> 
     ) 
    } 
} 

// access one of the properties of the instance (array). 
const MyComponent = props => { 
    console.log("props ", props); 
    return (
     <div> 
      <p>MODE:</p> 
      { props.panel.panelDisplayMode } 
     </div> 
    ); 
} 

Answer 2

狀態是不變的，所以你不應該試圖做this.state.array.push

嘗試：

this.setState({ 
    MyCollection: this.state.MyCollection.concat([MyPanel]) 
}); 

編輯：所以你的編輯之後，您應該做這樣的事情：

componentWillMount(){ 
     var nonsense = new MyType; 
     nonsense.panelNumber = 123; 
     nonsense.panelDisplayMode = "SINGLE"; 
     this.MyCollection.push(nonsense); 

     nonsense = new MyType; 
     nonsense.panelNumber = 456; 
     nonsense.panelDisplayMode = "DOUBLE"; 
     this.MyCollection.push(nonsense); 

     nonsense = new MyType; 
     nonsense.panelNumber = 789; 
     nonsense.panelDisplayMode = "TRIPLE"; 
     this.MyCollection.push(nonsense); 

     this.setState({ 
     MyCollection: this.state.MyCollection.concat([this.MyCollection]) 
     }); 
    } 

這將添加您添加到您的狀態（t他排列在你的狀態，就是）。