json 无法使用 reactjs 和 redux 进行渲染

Question

我用 axios 加载了一个 .json，文件加载得很好，但是当我渲染时不工作

editprofile.js --> 创建调度，并加载 de 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>   
                );
            });
        }
    }

将组件加入服务

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

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

            render (){
                return (
                    <EditProfileComponent 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 --> 减速器

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

加入所有reducer

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

    const reducers = combineReducers({
        allProfile:editProfileReducer,

    });

    export default reducers;

Answer 1

我认为有问题：

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

应该是：

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

Answer 2

你的reducer有错误。对于EDIT_PROFILE_SUCCESS，应该是

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

附带说明一下，您可以利用 es6 的箭头功能：

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

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

json 无法使用 reactjs 和 redux 进行渲染

json not render with reactjs and redux

json

reactjs

react-jsx

redux

axios