データを取得した後の処理状態 - 反応

Question

私は以下のようにデフォルトの状態を持っています。の写真の配列がnullの場合、状態は更新されないと考えて、postgresからデータを取得しています。その理由は、私が直接パラメータの一部にアクセスしていている

、私は行動から見何{this.state.media.photos[this.state.media.selectedMediaIndex].url}

は

action Object {type: "FETCH_MEDIA_FULFILLED", payload: Array[1]}

error TypeError: Cannot read property 'undefined' of null

action Object {type: "FETCH_MEDIA_REJECTED", payload: TypeError: Cannot read property 'undefined' of null at Media.render (http://localhost:3000/clien…}

は何ですこれを行う正しい方法ですか？状態の設定中にデフォルトオブジェクトを作成する必要があります。すべてのパラメータを更新してから状態を設定しますか？

少なくとも1つの写真の配列要素がある場合は問題はありません。唯一の問題は、写真列がnullの場合の最初の状態です。

状態：componentWillReceivePropsはnextPropsを受信すると

this.state = { 
     media : { 
      video : "", 
      photos : [{ 
       title : "", 
       url : "", 
       category : { 
        interior : false, 
        exterior : true, 
        closeup : false 
       }, 
       display : { 
        preview : false, 
        featured : true, 
        none : false 
       }, 
       size : "", 
       attribution_link : "", 
       attribution_text : "", 
       description : "" 
      }], 
      selectedMediaIndex : 0 
     } 
    } 

、私は自分の状態を更新しています。

componentWillReceiveProps(nextProps){   
    if(nextProps.media.length){ 
     this.setState({ 
      media : nextProps.media[0] 
     }) 
    } 
} 

CONNECTOR：

const mapStateToProps = function (store) {  
    return { 
     media: store.media.media 
    }; 
}; 

const PhotoConnector = Redux.connect(mapStateToProps)(Media); 

export default class MediaConnector extends React.Component { 

    render() { 
    return (
     <PhotoConnector media={this.props.media}/> 
    ); 
    } 
} 

REDUCER：

export default function reducer(
state={ 
    media: [], 
    fetching: false, 
    fetched: false, 
    error: null, 
}, action) { 

switch (action.type) { 
    case "FETCH_MEDIA": { 
    return {...state, fetching: true} 
    } 
    case "FETCH_MEDIA_REJECTED": { 
    return {...state, fetching: false, error: action.payload} 
    } 
    case "FETCH_MEDIA_FULFILLED": { 

    return { 
     ...state, 
     fetching: false, 
     fetched: true, 
     media: action.payload, 
    } 
    } 
} 

return state 

}

UPDATE

私はGEへの道を持っていませんエラーが発生した場合は、基本的に写真がヌルであるかどうかを確認し、デフォルトの状態配列を設定しています。

componentWillReceiveProps(nextProps){ 
    if(nextProps.media.length){ 

     if(!nextProps.media.photos){     

      this.setState({ 
       media : { 
        video : nextProps.media[0].video, 
        photos : [{ 
         title : "", 
         url : "", 
         category : { 
          interior : false, 
          exterior : true, 
          closeup : false 
         }, 
         display : { 
          preview : false, 
          featured : true, 
          none : false 
         }, 
         size : "", 
         attribution_link : "", 
         attribution_text : "", 
         description : "" 
        }], 
        selectedMediaIndex : 0 
       } 
      }) 
     } 
     else{ 
      this.setState({ 
       media : nextProps.media[0] 
      }) 
     } 
    } 
} 

これ以外の解決方法があります。

Answer 1

なぜデフォルトの小道具を持っていないのですか？

PhotoConnector.defaultProps = { 
    media: { 
    video: [], 
    photos: [], 
    } 
}; 

デフォルトストアですか？

class Media { 
    constructor(js = {}) { 
    this.video = js.video || []; 
    this.photos = js.photos || []; 
    } 
} 

state={ 
    media: [new Media()], 
} 

case "FETCH_MEDIA_FULFILLED": { 

    return { 
    ...state, 
    fetching: false, 
    fetched: true, 
    media: action.payload.map(m => new Media(m)), 
    }