Question

未处理的拒绝（TypeError）：this.props.dispatch(...).then 不是一个函数

2020-07-18

580

reactjs redux react-redux redux-thunk redux-promise-middleware

我正在一起使用 redux-thunk 和 redux-promise，但不知何故 redux-thunk 中间件未被调用，因此出现错误。

这是我的设置

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter} from 'react-router-dom'
import {Provider} from 'react-redux'
import { composeWithDevTools } from 'redux-devtools-extension';
import {createStore, applyMiddleware} from 'redux'
import thunk from 'redux-thunk'
import promiseMiddleware from 'redux-promise';

import {ThemeProvider} from "@material-ui/core/styles"
import theme from "./components/ui/Theme"
import reducers from './reducers/index'
import './index.css';
import App from './App';

const middleware =[thunk, promiseMiddleware]

const store = createStore(
  reducers,
  composeWithDevTools(applyMiddleware(...middleware))
)



ReactDOM.render(
  <Provider store={store}>
    <ThemeProvider theme={theme}>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </ThemeProvider>
  </Provider>  
  ,
  document.getElementById('root')
);

这是我的动作创建者

export const authUser =  () => { 

    const res = axios.get("http://localhost:3002/api/users/auth", {withCredentials: true})
      
    return {type: AUTH_USER, payload: res.data}
}

这是我的高阶 AUTH 组件，它呈现另一个组件，并在 ComponentDidMount 中分派动作后，根据结果我想更改路线。

import React from 'react'
import {connect} from 'react-redux'
import {withRouter} from 'react-router-dom'

import CircularProgress from '@material-ui/core/CircularProgress';
import {authUser} from '../actions/user'


export default function(WrappedComponent, isRestricted){
    class Auth extends React.Component {

    state = {
        loading: true
    }
    
        componentDidMount() {
        
        this.props.dispatch(authUser()).then(() => {
            this.setState({loading: false})
            
            // if(!this.props.user.isAuth && isRestricted) {
            //     this.props.history.push('/joinus')
            // }
            // else if (this.props.user.isAuth && isRestricted === null) {
            //     this.props.history.push('/')
            // }
        }) 
    }

    render() {

        if(this.state.loading) {
        
            return (
                <CircularProgress />
            )
        }


        return (
            <div>
                <WrappedComponent  {...this.props} />
            </div>
        )
    }  
        
    }

    function mapStateToProps (state) {
        return {
            user: state.user.userData
        }
    }
    
    return  connect(mapStateToProps)(withRouter(Auth))
}

最后，这是我得到的错误。

https://i.sstatic.net/jDrib.jpg 或 https://prnt.sc/tkcs0m

（未处理的拒绝（TypeError）：this.props.dispatch(…).then 不是函数）

如果我在 ComponentDidMount 中不使用 .then()，则会出现未定义的情况。另外，如果我通过添加 .then() 在 AXIOS 请求内部进行分派，这是我得到的另一个错误

（错误：操作必须是普通对象。对异步操作使用自定义中间件。） https://i.sstatic.net/FG8Ov.jpg 或 https://prnt.sc/tkcsqy

Answer 1

在向 axios 调用添加 async await 后，它起作用了（我认为它应该由中间件处理），但现在我的 Header 组件中出现了另一个错误

useEffect(() => {
        
        props.dispatch(actions.authUser()).then(() => {
            console.log(props, actions)
            if(props.user.isAuth) setToggleLogOut(true)
        })

        window.addEventListener('scroll', ()=> {
            window.scrollY > 0 ? setToggleHeader(true) : setToggleHeader(false)
        });
    }, [props.value])

    const handleLogOut = () => {
        props.logOutUser(() => {
            setToggleLogOut(false)
        })
    }


.
.
.
.
.
.
.
.


function mapStateToProps (state) {
    return {
        user: state.user.userData
    }
}

export default connect(mapStateToProps)(Header)

（未处理的拒绝（TypeError）：无法读取未定义的属性“isAuth”） https://prnt.sc/tkd0bj

Answer 2

问题 1：问题出在您的 axios 调用中。在此处输入链接描述阅读文档。axios get 返回一个承诺。使用可以使用 try catch 或 async await。

问题 2：

const authData = useSelector(state => state.user)
const [isLoading, setIsLoading] = useState(true)

useEffect(() => {
   if(authData.isAuth) {
      setIsLoading(false)
   }

}, [authData]);

if(isLoading) return <p>loading...</p>

// your rest of code