子供の状態になる場合は、コンポーネントの小道具がヌル

Question

// 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： 'デモ'}}

コードを書く

親レコードが新しい状態を受け取ったために可視になったとしても、子コンポーネントのWReReivePropsでは、最初のアプローチであるnextPropsは常に未定義です。

2番目は適切に動作しますが、

なぜ最初の動作が間違っていますか？

Answer 1

official documentによると、Reactは実装中に初期小道具をcomponentWillReceivePropsと呼んでいません。コンポーネントの小道具の一部が更新される場合にのみ、このメソッドを呼び出します。

私はあなたの問題の回避策を用意しており、解決策として次のようなフィドルを作成しました。それはあなたのすべての問題を解決するはずです。

フィドル - https://jsfiddle.net/4o7o6cmw/4/