錯誤TypeError：無法將未定義或null轉換為對象

Question

我在axios上遇到此錯誤，json加載正常，但渲染存在問題

actions.js：

export const getUser = (callback)=>{
    return function(dispatch){
        dispatch({type: 'FETCH_GET_USER_REQUEST'});
        axios.get('https://jsonplaceholder.typicode.com/users')
        .then((response)=>{
            dispatch({type:'FETCH_GET_USER_SUCCES', payload:response.data});
            if (typeof callback === 'function') {
                callback(null, response.data)
            }
        })
    } 
}

reducerUser.js

export const getUserReducer = (state=[], action) =>{
    switch(action.type){
        case 'FETCH_GET_USER_REQUEST':
            return state;
        case 'FETCH_GET_USER_FAILURE':
            return state;   
        case 'FETCH_GET_USER_SUCCES':
            return [...action.payload.data];
        default:
            return state;
    }
}

container.jsx

class GetUserContainer extends Component{
    componentDidMount(){
        this.props.getUser();
    }
    render(){
        return(
            <GetUserComponent allUser={this.props.allUser} />
        )   
    }
}
function mapStateToProps(store){
        return{
            allUser:store.allUser
        }
}
function matchDispatchToProps(dispatch){
    return bindActionCreators({
        getUser:getUser
    }, dispatch)
}

store.js

 const store = createStore(
 reducers,
   applyMiddleware(thunk,  logger())
);

Answer 1

查看您的控制台輸出，當您FETCH_GET_USER_SUCCES操作時，您的減速器很可能是您的問題。

您將返回以下內容： [...action.payload.data]; 。 嘗試記錄您的有效負載，有效負載上可能沒有數據對象，因此將未定義或null轉換為對象錯誤。 我敢打賭，您只需要返回： [...action.payload];

Answer 2

從錯誤堆棧中，您可以看到在代碼中先從getUserReducer調用了錯誤，然后在_toConsumableArray中_toConsumableArray該方法，該方法是babel在將spread operator轉換為es5時創建的輔助方法。

就像@ಠ_ಠ暗示的那樣，您會收到錯誤，因為action.payload.data不是對象，在這種情況下，應用傳播運算符將失敗。 （ [...action.payload.data] ）