reactjs - 使用 axios 时未定义操作负载

问题描述

我正在学习反应并且我遇到了 action.payload 对象的问题，因为在使用 axios 执行获取请求后它没有被填充。执行请求的方法如下所示：

const searchUsers = async text => {
        setLoading(true);

        const res = await axios.get(`https://api.github.com/search/users?q=${text}&client_id=${process.env.REACT_APP_GITHUB_CLIENT_ID}&client_secret=${process.env.REACT_APP_GITHUB_CLIENT_SECRET}`)

        dispatch({
            type: SEARCH_USERS,
            payload: res.data.items
        })
    }

减速机：

export default (state, action) => {
    switch (action.type) {
        case SEARCH_USERS:
            return {
                ...state,
                users: action.payload,
                loading: false
            }
        case SET_LOADING:
            return {
                ...state,
                loading: true
            }
        default:
            return state;
    }
}

我在其中传递有效负载的组件：

const Users = () => {
    const githubContext = useContext(GithubContext);

    const {loading, users} = githubContext;

    if (loading) {
        return <Spinner/>
    } else {
        return (
            <div style={userStyle}>
                {users.map(user => (
                    <UserItem key={user.id} user={user}/>
                ))}
            </div>
        );
    }

}

action.payload 未定义，我不明白为什么..请求有问题吗？我已经 console.log 它看起来请求成功了

标签： reactjsreduxaxios

您的代码中的问题是使用异步操作创建器而没有任何中间件来处理该异步操作创建器。如果您的动作创建者是一个同步函数，那么您的代码就可以正常工作。

与同步动作创建者相比，异步动作创建者需要以不同方式处理。

有不同的 NPM 包可以让你处理异步动作创建者。一个这样的包是redux-thunk. 它是一个中间件，允许您创建一个返回函数而不是动作的动作创建者。

要解决问题，install redux-thunk然后更改您的操作创建者以返回一个函数。

const searchUsers = (text) => {
   return async (dispatch) => {
        setLoading(true);

        const res = await axios.get(...);

        dispatch({
            type: SEARCH_USERS,
            payload: res.data.items
        })
    }
}

其他一些允许您处理异步动作创建者的包：

reactjs - 使用 axios 时未定义操作负载

问题描述

解决方案

推荐阅读