Question

我有以下代码，如果用户登录则会在导航栏中加载当前用户的信息，或者如果用户尚未登录则加载空数据。代码适用于我，但我遇到了问题：当我转到任何其他页面时，导航被复制（特别是rendernav功能）。

editprofile.js - ＆gt;创建调度，并加载JSON

export const editProfile = (callback) => {
  return function(dispatch) {
    dispatch({type: 'LIST_USER_REQUEST'});
    axios({
      method: 'get',
      url: 'https://gist.githubusercontent.com/anonymous/38c1444f753c70cf79ee980638a14de7/raw/34951eebfa006fea3db00fb492b491ac990c788e/vamos.json',
      headers: {'Content-Type': 'application/x-www-form-urlencoded'}
    })
    .then((response) => {
      dispatch({type:'LIST_USER_SUCCESS', payload:response.data});
      if (typeof callback === 'function') {
        callback(null, response.data);
      }
    })
    .catch((error) => {
      dispatch({type:'LIST_USER_FAILURE'});
      if (error.response.status == 401) {
        browserHistory.push('login')
        toastr.error(error.response.message, 'User')
      }
      if (typeof callback === 'function') {
        callback(error.response.data, null)
      }
    })
  }
}

EditProfileComponent.jsx - ＆gt;创建了组件

export default class NavComponent extends Component {
  render() {
    return (
      <table>
        <thead>
          <tr>
            <th>SN</th>
            <th>Email</th>
            <th>created</th>
          </tr>
        </thead>
        <tbody>
          {this.renderSign()}
        </tbody>
      </table>
    )
  }


        // --> this function duplicated, when I go to another page


  renderSign() {
    return this.props.allProfile.map((profile, index) => {
      if (profile.status === 'SUCCESS') {
        return (
          <ul className="nav navbar-nav" key={index}>
            <li className="dropdown user user-menu">
              <a href="#" className="dropdown-toggle" data-toggle="dropdown">
                <img src="img/perfil.jpg" className="user-image" alt="User Image" />
                <span className="hidden-xs">{profile.user.email}</span>
              </a>
            </li>
          </ul>
        )
      } else if (profile.status === 'FAIL') {
        return (
          <ul className="nav navbar-nav" key={index}>
            <li><Link to='/sign_in'>Sign In</Link></li>
            <li><Link to='/sign_up'>Sign Up</Link></li>
          </ul>
        )
      }
    }
  }

使用服务加入组件：

import { editProfile } from '../action/editProfile.js';
import NavComponent from '../component/editProfileComponent.jsx';

export default class EditProfileContainer extends Component {
  componentDidMount() {
    this.props.editProfile();
  }

  render () {
    return (
      <NavComponent allProfile={this.props.allProfile} />
    );
  }
}

function mapStateToProps(store) {
  return {
    allProfile: store.allProfile
  };
}

function matchDispatchToProps(dispatch) {
  return bindActionCreators(
    {
      editProfile:editProfile
    }, 
    dispatch
  )
}

export default connect(mapStateToProps, matchDispatchToProps)(EditProfileContainer);

editProfileReducer - ＆gt;减速机

export const editProfileReducer = (state=[], action) => {
  switch(action.type) {
    case 'LIST_USER_REQUEST':
      return state;
    case 'LIST_USER_SUCCESS':
      return state;
    case 'LIST_USER_FAILURE':
      return [...action.payload];
    default:
      return state;
  }
}

Answer 1

即使我没有看到整个代码结构，但看起来你使用的是错误的reducer。当您使用store.allProfile时，我发现您正在使用store.editProfile。如果allProfile数组有两个项目，那么当您使用.map函数时，您将有两个<ul>标记。如果有意使用allProfile数组，则不应使用.map函数，而只使用数组的第一个元素。

渲染重复翻页反应

1 个答案: