兒童組件的道具時不會更新父組件如果狀態變爲開始爲空

// 1 - Parent - Wrong 
render() { 
const { record } = this.state; 
if (!record) { return null; } 
return (
    <div> 
    <p>Now this is visible</p> 
    <Children id={record.id}; 
    </div> 
); 
} 

// 2 - Parent - Right 
render() { 
    const { record } = this.state; 
    const recordId = record ? record.id : null; 

    return (
    <div> 
     <p>Now this is visible</p> 
     <Children id={recordId}; 
    </div> 
); 
} 

// Children 
componentWillReceiveProps(nextProps) { 
    console.log(nextProps.id); 
}

：this.state = {記錄：{ID： '示範'}}兒童組件的道具時不會更新父組件如果狀態變爲開始爲空

編寫代碼第一種方法，nextProps總是在Children的componentWillReceiveProps中未定義，即使Parent記錄因爲它接收到新的狀態而變得可見。

雖然第二個工作，它應該。

爲什麼第一個工作不正確？

來源

2017-07-15 vrotos

你能修改這個嗎？目前還不清楚問題是什麼 – Valentin

對不起，我是新來的，問題是爲什麼孩子在使用第一個時沒有收到道具。 – vrotos

根據official document，React在安裝期間不會調用componentWillReceiveProps以及初始道具。如果組件的一些道具可能更新，它只會調用這個方法。

我對您的問題有一個解決方法，併爲解決方案創建了以下小提琴。它應該解決你所有的問題。

小提琴 - https://jsfiddle.net/4o7o6cmw/4/

來源

2017-07-15 15:33:43

謝謝，在回調中再次更新狀態是一個很好的解決方法。你有什麼建議我應該在哪兒聽兒童部分的道具更新？ – vrotos

你可以使用'componentDidMount'來初始偵聽道具。之後，你可以從'componentWillReceiveProps'監聽。檢查此[小提琴]（https://jsfiddle.net/4o7o6cmw/6/）。 –

不錯，謝謝！ – vrotos

兒童組件的道具時不會更新父組件如果狀態變爲開始爲空

回答

相關問題