返品の場合、返品の場合は返品後にメイン返品に戻ります

Question

コンテナレンダリングの場合は、返品のの2倍のPlaysListコンポーネントを2回レンタルしています。この値はundefinedとなることがありますので、その場合はnullに設定して、条件付きリターンを渡します。それが真であれば、条件付きリターンが素早く表示されますが、それからメインリターンに戻り、ナットを取得します。ここで

は、コンポーネントをレンダリングするコンテナです：

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 
import _ from 'lodash'; 

import { fetchUserPlays } from '../actions'; 
import PlaysList from '../components/plays_list'; 

class UserPlaysIndex extends Component { 
    componentDidMount() { 
    this.props.fetchUserPlays(); 
    } 

    renderBandsPlays() { 
    return _.map(this.props.plays.bands, band => { 
     return (
     <div key={band.id}> 
      <h3>{band.name}</h3> 
      <PlaysList plays={band.plays} /> 
     </div> 
    ); 
    }) 
    } 

    render() { 
    return (
     <div> 
     <h2>Plays</h2> 
     {this.renderBandsPlays()} 

     <h2>Favorites</h2> 
     <PlaysList plays={this.props.plays.favorites} title="Favorites" /> 
     </div> 
    ); 
    } 
} 

function mapStateToProps(state) { 
    return { plays: state.user_plays }; 
} 

export default connect(mapStateToProps, {fetchUserPlays})(UserPlaysIndex); 

そしてここでは、条件付きのレンダリングでPlaysListコンポーネントです：

import React from 'react'; 

const PlaysList = props => { 
    // const {plays} = props; 
    let plays; 
    if (props.plays) { 
    plays = props.plays; 
    } else { 
    plays = null; 
    } 

    if (!plays) { 
    // BUG: this is displayed but then it goes back to the main return ! 
    return <div>Nothing to see here.</div>; 
    } 

    const PlayItems = _.map(plays, play => { 
    return (
     <li className="list-group-item" key={play.id}> 
     <div>{play.author}</div> 
     <h4>{play.title}</h4> 
     <div> 
      <i className="fa fa-male"></i> {play.h} &nbsp; 
      <i className="fa fa-female"></i> {play.f} 
     </div> 
     </li> 
    ); 
    }); 

    return (
    <div className="list-group"> 
     {PlayItems} 
    </div> 
); 
}; 

export default PlaysList; 

私はそれがこのためにnull値のために戻って、メインリターンになります知っていますまだ<div class="list-group">が内部に何も描画されていません。

Google inspector output screenshot

SOS、助けてください！

Answer 1

私はまだ理解できませんが、私はこれを回避することができました。 plays値をロギングすることで、私はこれを得た：

null 
(9) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}] 
{} 

問題の小道具は、最初のnullですが、私はちょうど変更lodashするために、このおかげで周りを取得するので、それが空のオブジェクトになり、私の場合に：

if (!plays || _.isEmpty(plays)) { 
    return <div>Nothing to see here.</div>; 
} 

私は誰かが答えを持っているなら、なぜ私の小道具が突然変異しているのかを知りたいと思っています

ありがとうございました。

UPDATE： は、これは私が{}に私のPlaysReducerデフォルトの状態を設定したため、その最初のレンダリング、ヌルである、それは何もcomponentDidMount()から受信しなかったため{}だすべてでした！私は改善するために何をやったか

ので、私は

if (!plays) { 
    return <div>Nothing to see here.</div>; 
}