如何在發送請求後使用react/redux重新呈現頁面？

Question

發佈與服務器響應之間的時間很短。在獲得積極響應時，如何讓組件重新呈現？我試圖componentWillGetProps（）{}和if語句一樣

if(this.props.incomingItems){return: this.props.incomingItems}

但他們沒有解決。你是如何解決這個問題的？ PS我正在使用redux和axios來處理請求。

import React, { Component } from 'react'; 
import { reduxForm } from 'redux-form'; 
import * as actions from '../../actions'; 

class eventView extends Component { 
    componentWillMount() { 
    this.props.eventView(this.props.params.eventID); 
    } 


createNewRole(roleName){ 
    this.props.createNewRole(roleName, this.props.params.eventID); 
}; 

renderUsers(){ 
    return this.props.eventDetails.userList.map((user)=>{ 
    return(
    <li className='list-group-item eventUserList' background-color="#f2f2f2" key={user._id}> 
     {user.userName} 
    </li> 
    ); 
    }); 
    }; 


deleteListItem(key){ 
    const newKey = key.dispatchMarker.substr(44, 24); 
    this.props.RemoveRoleFromList(newKey) 
    this.props.fetchEvents(); 
    } 

renderRoles(){ 
    return this.props.eventDetails.role.map((role)=>{ 
    return(
    <li className='list-group-item roleList' key={role._id}> 
     {role.roleName} 
     <img className="deleteListItem" 
     src="/img/trash.png" 
     key={role._id} 
     onClick={this.deleteListItem.bind(this)}/> 
    </li> 
     ); 
     }); 
      }; 




    render() { 
    const { handleSubmit, fields: {eventName,location, eventPassword, roleName} } = this.props; 
    if(this.props.roleList){ 
     console.log(this.props.roleList) 
    } 
    if (this.props.eventDetails){ 
return (

    <div className='container-fluid'> 

    <div className="roleBox"> 
    <form onSubmit={handleSubmit(this.createNewRole.bind(this))}> 
    <div> 
    <input {...roleName} 
      className="form-control roleBoxInputBar" 
      autoComplete="off"/> 
     <button className="RoleButton">Save</button> 
     </div> 
     <div className="listOfRoles"> 
     <ul className="listOfRoles pre-scrollable"> 
     {this.renderRoles()} 
     </ul> 
     </div> 
     </form> 
     </div> 
    <div> 
    <div> 
     <h1 className="eventName"> 
     {this.props.eventDetails.eventName} 
     </h1> 
    </div> 
    <br/> 
    <table> 
     <tbody> 
     <tr> 
      <td className="eventViewTableLocation">Location:</td> 
      <td className="eventViewTable">{this.props.eventDetails.location}</td> 
     </tr> 
     <tr> 
      <td className="eventViewTableLocation">Date:</td> 
      <td className="eventViewTable">12/Feb/2018</td> 
     </tr> 
     <tr> 
      <td className="eventViewTableLocation">Time Left:</td> 
      <td className="eventViewTable">2 Days 2 Hours</td> 
     </tr> 
     </tbody> 
    </table> 

    </div> 
    <div className='eventViewUserBox'> 
     <h4 className="listOfUsers">Organisers:</h4> 
     <ul> 
     {this.renderUsers()} 
     </ul> 
    </div> 
    </div> 
    ); 
}else { 
    return (
    <div> 
    </div> 
); 
} 

    } 
} 



function mapStateToProps(state) { 
    return { eventDetails: state.api.eventDetails }; 
    return { roleList: state.api.roleList }; 
    return { createdRole: state.api.createdRole }; 
} 

export default reduxForm({ 
    form: 'eventView', 
    fields: ['eventName', 'location', 'eventPassword', 'roleName'] 
}, mapStateToProps, actions)(eventView); 

我的愛可信後是這樣的

export function createNewRole({roleName}, eventID){ 
    return function(dispatch) { 
    axios.post(`${ROOT_URL}createRole/`+eventID, {roleName}) 
     .then(response => { 
     if (response.data){ 
      dispatch({ 
      type: CREATED_ROLE, 
      payload: response.data, 
      }); 
      }; 
     }) 
     .catch(response => dispatch(authError(response.data.error))); 
    }; 
}; 

減速機：

export default function(state = {}, action) { 
    switch(action.type) { 
    case FETCH_ROLES: 
     return { ...state, roleList: action.payload }; 
    case CREATED_ROLE: 
     return { ...state, createdRole: action.payload }; 
    } 
    return state; 
} 

非常感謝！

Answer 1

function mapStateToProps(state) { 
    return { eventDetails: state.api.eventDetails }; 
    return { roleList: state.api.roleList }; 
    return { createdRole: state.api.createdRole }; 
} 

此函數總是返回的第一個對象。它應該是：

function mapStateToProps(state) { 
return { 
    eventDetails: state.api.eventDetails, 
    roleList: state.api.roleList, 
    createdRole: state.api.createdRole 
}; 
} 

我猜roleList和createdRole總是未定義？如果你要展示減速器也是很好的。