Question

我正在从端点获取数据。但是状态没有更新。它始终是不确定的。

由于某些原因，this.props.users未定义。难道我做错了什么？

componentDidMount（）之后，我触发了将请求发送到端点的fetchUsers动作。数据已成功获取，但最终状态未更新。

这是我的布局组件


class Layout extends Component {
    render() {
        return (
            <div className="container">
                {
                    this.props.users.map((user, key) => {
                        return <a className="list-group-item list-group-item-action active">User #{user.id}</a>
                    })
                }
            </div>
        )
    }
}

const mapStateToProps = state => {
    return {
        channels: state.users.data,
    }
}

const mapDispatchToProps = dispatch => {
    return {
        fetchUsers: () =>
            dispatch(user.fetchUsers()),
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Layout);

这是动作文件

export const fetchUsers = () => {

    return (dispatch, getState) => {
        let headers = { "Content-Type": "application/json" };
        return fetch("http://127.0.0.1:3030/api/users/", { headers, })
            .then(res => {
                if (res.status < 500) {
                    return res.json().then(data => {
                        return { status: res.status, data };
                    })
                } else {
                    console.log("Server Error!");
                    throw res;
                }
            })
            .then(res => {
                if (res.status === 200) {
                    dispatch({ type: 'USERS_FETCHED', data: res.data });
                    return res.data;
                }
            })

    }
}

这是减速器

const initialState = {
    users: []
};

export default function channels(state = initialState, action) {
    switch (action.type) {
        case 'USERS_FETCHED':
            return { ...state, users: action.data };
        default:
            return state;
    }
}

Answer 1

我认为错误是由于您致电mapDispatchToProps中的调度员而导致的。由于您是直接导出函数fetchUsers，因此不应调用user.fetchUsers。

const mapDispatchToProps = dispatch => {
    return {
        fetchUsers: () =>
            dispatch(fetchUsers()),
    }
}

数据已获取但状态未更新

1 个答案: