未捕獲的錯誤：操作必須是普通對象。 使用自定義中間件進行異步操作。 - Laravel-react 項目

Question

首先，我在 Laravel 項目中使用 react 並嘗試通過使用 axios 的異步調用通過 action creator 列出 Package.js 組件中的包。 即使我使用了 redux-thunk 中間件，它也會拋出錯誤“未捕獲的錯誤：操作必須是普通對象。 使用自定義中間件進行異步操作。'。 下面是我的代碼，您甚至可以在 GitHub 中訪問我的代碼 - [https://github.com/sunethice/Emerald_Tours]。

索引.js

 import React, {Component} from 'react'; import ReactDOM from 'react-dom'; import { Provider } from 'react-redux'; import { persistStore } from 'redux-persist'; import { PersistGate } from 'redux-persist/lib/integration/react'; import { configureStore } from './store'; import {BrowserRouter as Router, Link, Route, Switch} from 'react-router-dom'; import './css/index.css'; import Customer from './Customer'; import Admin from './Admin'; class Index extends Component { render() { return ( <Router> <Route exact path="/" component={Customer}></Route> <Route exact path="/admin" component={Admin}></Route> </Router> ); } } const store = configureStore(); const persistor = persistStore(store); ReactDOM.render( <Provider store={store}> <PersistGate loading="<div>Loading...</div>" persistor={persistor}> <Index/> </PersistGate> </Provider>, document.getElementById('root'));

商店.js

 import { createStore, combineReducers, applyMiddleware } from 'redux'; import { packages } from './components/reducers'; import { persistReducer } from 'redux-persist'; import storage from 'redux-persist/lib/storage'; import autoMergeLevel2 from 'redux-persist/lib/stateReconciler/autoMergeLevel2'; import thunk from 'redux-thunk'; import { composeWithDevTools } from 'redux-devtools-extension'; const reducers = { packages, }; const persistConfig = { key: 'root', storage, stateReconciler: autoMergeLevel2, } const rootReducer = combineReducers(reducers); const persistedReducer = persistReducer(persistConfig, rootReducer); export const configureStore = () => createStore( persistedReducer, {}, composeWithDevTools( applyMiddleware(thunk) ) );

減速器.js

 import { LIST_PACKAGES, LIST_PACKAGES_FAILURE } from './actionTypes'; export const packages = (state = [], action) => { const { type, payload } = action; switch(type){ case LIST_PACKAGES: const newList = { packages: payload }; return state.concat(newList); case LIST_PACKAGES_FAILURE: return state; default: return state; } }

動作.js

 import axios from 'axios'; import { LIST_PACKAGES, LIST_PACKAGES_FAILURE } from './actionTypes'; export function listPackages () { return (dispatch) => { axios.get('/api/packages') .then((res) =>{ dispatch({type: LIST_PACKAGES ,payload:res.data}); }) .catch((error)=> { dispatch({type: LIST_PACKAGES_FAILURE, payload: error}); }) } }

包.js

 import React,{ Component, useState } from "react"; import { connect } from 'react-redux'; import { listPackages } from '../actions'; import pkg1 from '../../img/tour-package1.jpg'; class Package extends Component { componentDidMount(){ this.props.fetchData(); } render() { return ( <div> <div className="container mt-5"> <div className="row"> <div className="col-12"> <div className="h3 text-center"> Tour Packages </div> <p> Lorem ipsum dolor sit amet, curabitur nec lacus pellentesque ut facilisis, lacus iaculis turpis interdum pede, sapien quis amet vitae, erat parturient, turpis congue sit. Hac nulla phasellus ornare. Volutpat risus ipsum nulla ducimus erat. Scelerisque eu imperdiet wisi wisi, sit libero sed ipsum sodales phasellus, odio vel ac non ac, sodales viverra, metus volutpat quis rutrum diam ac integer. Posuere nullam eu vestibulum non nonummy. Metus purus ac malesuada vitae ut qui, sed rhoncus nonummy, massa ac urna risus, faucibus aliquam malesuada fusce gravida urna. </p> </div> </div> <div className="row"> <div className="col-md-12 d-flex justify-content-center mb-5"> <div className="btn-group"> <button type="button" className="btn btn-outline-secondary" data-rel="0" > Sri Lanka </button> <button type="button" className="btn btn-outline-secondary" data-rel="1" > Maldives </button> </div> </div> </div> <div className="row"> <div className="col-md-4"> <div className="travel-place"> <div className="work-image"> <img src={pkg1} className="img-fluid person" alt="destination" /> <div className="overlay"> <div className="overlay_shape"> <a href="#" className="over-btn"> 10 photos </a> <a href="tourpackage.html" className="view-all" > View All Places <i className="fas fa-long-arrow-alt-right"></i> </a> </div> </div> </div> <div className="travel-text"> <h3>Love City, Paris, Italy</h3> <p> for 7Days <span>|</span> $ 710.00 </p> </div> </div> </div> </div> </div> </div> ); } } const mapStateToProps = (state) => ({ packages : state.packages }); const mapDispatchToProps = (dispatch) => ({ fetchData: () => dispatch(listPackages()) }); export default connect(mapStateToProps, mapDispatchToProps )(Package);

如果您能讓我知道我做錯了什么，將不勝感激。

Answer 1

我想到了。 這與代碼無關。 這與依賴關系有關。 我只是輸入“npm outdated”來檢查過時的依賴關系並更新它們。 然后一切正常。