JSON不reactjs和终极版

Question

我加载与爱可信一个以.json，并在文件加载以及渲染，但是当我变得不工作

editprofile.js - >创建调度和负荷，JSON

export const editProfile = (callback)=>{ 
     return function(dispatch){ 
      dispatch({type: 'EDIT_PROFILE_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:'EDIT_PROFILE_SUCCESS', payload:response.data}); 
       if (typeof callback === 'function') { 
        callback(null, response.data); 
       } 
      }) 
      .catch((error) =>{ 
       dispatch({type:'EDIT_PROFILE_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 - >创建的组件

export default class EditProfileComponent extends Component{ 
     render(){ 
      return(
       <table> 
        <thead> 
         <tr> 
          <th>SN</th> 
          <th>Email</th> 
          <th>created</th> 
         </tr> 
        </thead> 
        <tbody> 
         {this.renderEditProfile()} 
        </tbody> 
       </table> 
      ) 
     }  
     renderEditProfile(){ 
      let sN = 1; 
      return this.props.allProfile.map((user)=>{ 
       return(
        <tr key={user.sN} > 
         <td>{sN++}</td> 
         <td>{user.email ? user.email : '---'}</td> 
         <td>{user.created_at ? user.created_at : '---'}</td> 
        </tr> 
       ); 
      }); 
     } 
    } 

与服务

加入组分

editProfileReducer - >减速

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

加入所有的减速

import { editProfileReducer } from './reducer/editProfileReducer.js' 

    const reducers = combineReducers({ 
     allProfile:editProfileReducer, 

    }); 

    export default reducers; 

Answer 1

减速机出现错误。对于EDIT_PROFILE_SUCCESS，它应该是

case 'EDIT_PROFILE_SUCCESS': 
    return [...state, action.payload]; 

在一个侧面说明，你可以利用ES6的箭头功能：

export const editProfile = (callback) => (dispatch) => { 
    dispatch({type: 'EDIT_PROFILE_REQUEST'}); 
    // .... 
}; 

您还应该使用常量操作名称。

Answer 2

我觉得有问题：

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

它应该是：

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