リンクの後にコンポーネントをレンダリングする際にエラーが発生しました

Question

コンポーネントに入っているときにエラーが発生した場合、Linkをクリックして戻ってみてください。

基本的流れは以下のとおりです。 WeddingListページ- >クリック- >Wedding Page- >クリック- >WeddingList

私は戻ってクリックしたときにそう、このエラーがトリガされます。ここで

TypeError: this.props.weddings.map is not a function WeddingList.renderWeddings

は私のコードです：

WeddingList.js

import React, { Component } from 'react'; 
 
import { connect } from 'react-redux'; 
 
import { fetchWeddings } from '../../actions'; 
 
import { Link } from 'react-router-dom'; 
 

 
class WeddingList extends Component { 
 
    componentWillMount() { 
 
    this.props.fetchWeddings(); 
 
    } 
 

 
    renderWeddings() { 
 
    return this.props.weddings.map(wedding => { 
 
     return (
 
     <div className="row" key = { wedding._id }> 
 
     <div className="col s10 offset-s1" key={wedding._id}> 
 
      <div className="card blue-grey darken-1" key={wedding._id}> 
 
      <div className="card-content white-text"> 
 
       <span className="card-title">{wedding.coupleName1} & {wedding.coupleName2}</span> 
 
      </div> 
 
      <div className="card-action"> 
 
       <Link 
 
       to={'/wedding/'+wedding.pageName} 
 
       className="btn"> 
 
       Visit! 
 
       </Link> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    ); 
 
    }) 
 
    } 
 

 
    render() { 
 
    return (
 
     <div> 
 
     {this.renderWeddings()} 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
function mapStateToProps({ weddings }) { 
 
    return { weddings }; 
 
} 
 

 
export default connect(mapStateToProps, { fetchWeddings })(WeddingList);

Wedding.js

import React from 'react'; 
 
import WeddingPage from './weddings/WeddingPage'; 
 
import { Link } from 'react-router-dom'; 
 

 
const Wedding = props => { 
 
    return (
 
    <div> 
 
     <WeddingPage {...props}/> 
 
     <Link to={'/weddings'} className="btn">Back</Link> 
 
    </div> 
 
); 
 
} 
 

 
export default Wedding;

weddingsReducer.js

import { FETCH_WEDDINGS, FETCH_WEDDING } from '../actions/types'; 
 

 
export default function(state = [], action) { 
 
    switch (action.type) { 
 
    case FETCH_WEDDINGS: 
 
     return action.payload; 
 
    case FETCH_WEDDING: 
 
     return action.payload; 
 
    default: 
 
     return state; 
 
    } 
 
}

reducers.js this.props.weddingsは最初のレンダリングでundefinedであるように見え、事前

Answer 1

で

import { combineReducers } from 'redux'; 
 
import { reducer as reduxForm } from 'redux-form' 
 
import authReducer from './authReducer'; 
 
import weddingsReducer from './weddingsReducer'; 
 

 
export default combineReducers({ 
 
    auth: authReducer, 
 
    form: reduxForm, 
 
    weddings: weddingsReducer, 
 
    wedding: weddingsReducer 
 
});

感謝。結婚式がajaxリクエスト（fetchWeddings）で受け取られた場合に起こります。解決策は、あなたのreducers.jsに初期状態を設定することです。また、

import { FETCH_WEDDINGS, FETCH_WEDDING } from '../actions/types'; 

const initialState = { weddings: [] } 

export default function(state = initialState, action) { 
    switch (action.type) { 
    case FETCH_WEDDINGS: 
     return {...state, weddings: action.payload.weddings}; 
    case FETCH_WEDDING: 
     return {...state, wedding: action.payload.wedding}; 
    default: 
     return state; 
    } 
} 

、あなたはあなたのPropTypesWeddingList.jsに検証することができます：

import PropTypes from 'prop-types'; 

class WeddingList extends Component { 
    static propTypes = { 
    wedding: PropTypes.array.isRequired 
    } 
    .... 
}