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

我的axios帖子就是这样的

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总是未定义的？如果你要显示减速器也会很好。

如何使用react / redux在post请求后重新呈现页面？

1 个答案: