反应：未处理的拒绝（TypeError）：无法读取未定义的属性'catch'

Question

我正在尝试使用 axios 在 react 中获取表单列表

这是函数

useEffect(() => {
        const fetchData = async () => {
            dispatch({ type: 'SET_STATE', payload: { loading: true } })
            const response = await axios

                .get(`${API_URL}/form`, {
                    userId: localStorage.getItem('userId'),
                    headers: {
                        authorization: localStorage.getItem('userId')
                    }

                })
            console.log(response)
                .catch((err) => {
                    if (err.response.status === 401) history.push('/login')
                    return dispatch({
                        type: 'SET_STATE',
                        payload: { loading: false, error: err.response.data.msg }
                    })
                })
            dispatch({
                type: 'SET_STATE', payload: {
                    data: response.data.form,
                    loading: false,
                },

            })
        }
        fetchData()
        return () => {
            dispatch({ type: 'SET_STATE', payload: { loading: true, error: '' } })
        }
    }, [])

这就是减速器

const initialState = {
    data: [],
    loading: false,
    error: '',
}
const formReducer = (state = initialState, action) => {
    switch (action.type) {
        case 'SET_STATE':
            return { ...state, ...action.payload }
        default:
            return state
    }

}

但我收到此错误：

未处理的拒绝（TypeError）：无法读取未定义的属性“catch”

Answer 1

您通过在get 和catch 之间添加console.log 破坏了承诺链。在then 中使用console.log，如下所示：

您还将async/await 与then 混合使用。虽然，它会工作response 不会是你所期望的。只需使用then 链接即可。

useEffect(() => {
        const fetchData = () => {
           dispatch({ type: 'SET_STATE', payload: { loading: true } })
           axios
               .get(`${API_URL}/form`, {
                    ...
                })

                // add the console in then
                .then(response=>{
                   console.log(response))
                   dispatch({
                     type: 'SET_STATE',
                     payload: {
                       data: response.data.form,
                       loading: false,
                     }
                   })
                 })
                
                .catch((err) => {
                    ...
                })
            
        }
        fetchData()
        return () => {
            dispatch({ type: 'SET_STATE', payload: { loading: true, error: '' } })
        }
    }, [])