defaultPropsが正常に動作しない

Question

デフォルトでは、私のlastMessage propをidのオブジェクトにしたいと思います。しかし、下のコードではnullとなります。

コード：私のAppコンポーネントで

const App = ({ lastMessage }) => { // lastMessage is currently null 

    return (
     <Message lastMessage={lastMessage} /> 
    ) 
} 

class Message extends Component { 

    constructor(props) { 
     super(props) 
    } 

    componentWillReceiveProps(nextProps) { 
     const data = []; 

     if (nextProps.lastMessage.id !== this.props.lastMessage.id) { 
      log.debug('woohoo'); 
      // do something ... 
     } 
    } 

    render() { 

     return (
      // something... 
     ); 
    } 
} 

Message.defaultProps = { 
    lastMessage: { 
     id: 0, 
    }, 
}; 

私はnullMessageにコンポーネントとしてlastMessageを渡します。しかし、私はMessageコンポーネントにdefaultPropsを設定します。私はlastMessageはidを持つオブジェクトであることを期待

Message.defaultProps = { 
    lastMessage: { 
     id: 0, 
    }, 

、しかしそれはまだnullです。 nextProps.lastMessage.idが動作しない私のアプリがクラッシュしたので、私は私のアプリのコンポーネントでlastMessageの小道具を削除する場合lastMessageがさえ知らない人null

されている場合は、：

const App =() => { 

    return (
     <Message /> 
    ) 
} 

、メッセージコンポーネントが持つオブジェクトとしてlastMessagedefaultPropを作成しますid。

私の小道具がnullの場合、デフォルト値で渡そうとしています。私はこのようなものを試しましたが、それでも動作しません：

const App = ({ lastMessage = { id: 0 } }) => { // lastMessage is still null 

    return (
     <Message lastMessage={lastMessage} /> 
    ) 
} 

私はdefaultPropsを正しく設定していませんか？

Answer 1

メッセージコンポーネントにnullを渡すと、基本的にデフォルトプロパティ-が上書きされます。私があなたを正しく理解していれば、メッセージコンポーネントにlastMessageを渡すことを取り除くと動作します。それはこのようにとどまるべきです。

あなたはコンポーネントに引数を渡す前に、三元truthinessチェックを行うことができます

<Message lastMessage={lastMessage ? lastMessage : { id: 0 }} />