Question

我尝试使用React + Redux从API获取数据，但由于某种原因，数据无法呈现，即使我看到它来自控制台（使用redux-logger）看起来由于某种原因，reducer不会将areLoading值更改为false - 并且数据不会到达页面。但我无法弄清楚我们的错误在哪里，一切似乎都是正确的。

组件：

class Posts extends Component {
    componentDidMount() {
        this.props.postsFetch();
    }
    render() {

        return (
            <div>

                {this.props.data.map(function(post, i) {
                    return (
                        <div className="tale" key={i}>
                            <p className="title" key={i}>{post.title}</p>
                        </div>
                    );
                })
                }
            </div>
        );
    }
}

const mapStateToProps = (state) => {
    return {
        data: state.posts,
        gotError: state.postsError,
        areLoading: state.postsLoading
    };
};

export default connect(mapStateToProps, { postsFetch })(Posts);

减速：

const INITIAL_STATE = {
    areLoading: false,
    gotError: false,
    items: []
}
export function postsError(state = INITIAL_STATE, action) {
    switch (action.type) {
        case "POSTS_REQUEST_FAILURE":
            return {
                ...state,
                gotError: true    
            }
        default:
            return state;
    }
}

export function postsLoading(state = INITIAL_STATE, action) {
    switch (action.type) {
        case "POSTS_REQUEST_LOADING":
            return {
                ...state,
                areLoading: true    
            }
        default:
            return state;
    }
}

export function posts(state = INITIAL_STATE, action) {
    switch (action.type) {
        case "POSTS_REQUEST_SUCCESS":
            return {
                ...state,
                areLoading: false,
                items: action.data
            }
        default:
            return state;
    }
}

如果我将return语句更改为“return action.areLoading = false”，之后返回action.data，一切正常。但这种解决方案似乎不对。

操作：

export function postsError() {
    return {
        type: "POSTS_REQUEST_FAILURE",
    };
}

export function postsLoading() {
    return {
        type: "POSTS_REQUEST_LOADING",
        url: 'http://jsonplaceholder.typicode.com/posts/',
    };
}

export function posts(data) {
    return {
        type: "POSTS_REQUEST_SUCCESS",
        data
    };
}

export function postsFetch() {
    return function (dispatch) {
        dispatch(postsLoading());
    }
}

中间件：

export const apiCallMiddleware = store => next => action => {
    const { url, ...rest } = action;

    if (!url) return next(action)

    next({ type: "POSTS_REQUEST_LOADING" })

    axios(url)
        .then(response => {
            const data = response.data
            next({ type: "POSTS_REQUEST_SUCCESS", data })
        })
        .catch(err => {
            next({ ...rest, type: "POSTS_REQUEST_FAILURE" })
        })
}

我在论坛上搜索了一个解决方案，但他们似乎都没有帮助我。我也是React + Redux的新手，对不起新手问题。

提前致谢。

Answer 1

您正在将data作为对象传递到posts操作中，并且当您执行时，reducer不会识别data键{{1} 1}}。我相信您必须在两个地方将action.data更改为data。

在中间件中：

data: data

在next({ type: "POSTS_REQUEST_SUCCESS", data: data })行动中：

posts

，缩减器现在可以从export function posts(data) { return { type: "POSTS_REQUEST_SUCCESS", data: data //<--------- }; }访问密钥data，如下所示：

action

Answer 2

我弄清楚问题是什么。

这里

const mapStateToProps = (state) => {
    return {
        data: state.posts,
        gotError: state.postsError,
        areLoading: state.postsLoading
    };
};

我获得了state.post对象的链接。

将其更改为

const mapStateToProps = (state) => {
    return {
        data: state.posts.items,
        gotError: state.posts.gotError,
        areLoading: state.posts.areLoading
    };
};

让它查看对象属性，而不是整个对象

感谢您的帮助！

Answer 3

请尝试在mapStateToProps下记录您的状态，例如 console.log（state）; ，然后将确切的属性用于return语句。我相信有一些问题。

const mapStateToProps = (state) => {
    console.log(state);
    return {
        data: state.posts,
        gotError: state.postsError,
        areLoading: state.postsLoading
    };
};

提取的数据无法到达组件

3 个答案: