在鏈接後渲染組件時出錯 - 反應

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

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 
 
});

在此先感謝

Answer 1

它看起來像this.props.weddings是undefined第一渲染。如果通過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; 
    } 
} 

此外，您還可以驗證PropTypes在WeddingList.js：

import PropTypes from 'prop-types'; 

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