反應 - 在兒童中設置狀態？

我是新來的反應。我讀了很多帖子，找不到解決我的問題的方法。反應 - 在兒童中設置狀態？

我有幾個組件。一個是Gallery上的ajax請求被調用來獲取值。另一個組件是InnerContent。它是Gallery的一個子組件。

我的問題是正確的將狀態設置爲子組件中的道具，在我的情況下（InnerContent）？

這是我的輸入數據：

[ 
     { 
     "collection": 1, 
     "article": 1, 
     "name": "Gallery 2", 
     "images": [{ 
      "id": 2, 
      "name": "aaa", 
      "src": "http://via.placeholder.com/200x200" 
      }, 
      { 
      "id": 3, 
      "name": "bbb", 
      "src": "http://via.placeholder.com/200x200" 
      } 
     ] 
     } 
    ]

這裏是我的代碼：

class InnerContent extends Component { 
    constructor(props){ 
    super(props); 

    this.state = { 
     images: this.props.data.images, 
    }; 
    } 

removeImage() { 
    /*change state in this Component*/ 
} 

    render() { 
    return (
     <div> 
     <div>Gallery name: {this.props.data.name}</div> 
     <GalleryImageContent> 
      <SortableItem removeImage={this.removeImage} {...this.state} /> 
     </GalleryImageContent> 
     </div> 
    ); 
    } 
} 

function Content(props) { 
    let rows = []; 

    props.data.forEach((data) => { 
    rows.push(<InnerContent data={data}/>) 
    }); 

    return (
    <div> 
     {rows} 
    </div> 
); 
} 

class Foo extends Component { 
    constructor(props){ 
    super(props); 

    this.state = { 
     data: Service.data 
    }; 
    } 

    render() { 
    return(
     <div> 
     <button onClick={/*change state*/}>Add Gallery</button> 
     <Content data={this.state.data}/> 
     </div> 
    ); 
    } 
}

來源

2017-10-12 George

你的問題是什麼？是的，您可以將道具分配到您的孩子組件的狀態 – Jeffin

如果您創建了問題的簡化版本，而不是讓我們深入瞭解您的代碼，這將有所幫助。我假設你正試圖改變你的父組件的狀態。如果是這樣，創建一個更改狀態的函數，即'updateField =（newVal）=> this.setState（{field：newVal}）;'並通過道具傳遞給你的子組件，然後像這樣調用它'this .props.updateField（VAL）;' – fungusanthrax

這是正常設置狀態作爲子組件的道具。

你必須在你的情況下照顧一個更多的條件。您將狀態設置爲constructor，但當組件第二次呈現並且props發生更改時，狀態將保持不變，因爲constructor只會被調用一次。

基本上，你必須保持組件的state與道具最新。你可以使用componentWillReceiveProps(nextProps)函數來解決這個問題。

componentWillReceiveProps(nextProps) { 
 
    this.setState({ 
 
    images: nextProps.data.images 
 
    }); 
 
}

讓我知道這是否解決您的問題。

來源

2017-10-12 17:36:44

反應 - 在兒童中設置狀態？

回答

相關問題