Question

我目前正在构建类似Reddit的Redux应用程序。了解国家管理。

我现在遇到了一个我无法理解的问题，当我在一个帖子上投票时，我可以看到UI改变（+ 1 / -1投票），但只是在提示错误的第二个晚期。

Unhandled Rejection (TypeError): Cannot read property 'id' of undefined

我的组件结构如下

API文件

export const submitPostVote = (option, id) => {
    return axios.post(`${API_URL}/posts/${id}`, {option}, { headers })
}

Action Creator（使用redux-thunk）

export function postPostVote(option, id) {
    const request = API.submitPostVote(option, id)

    return (dispatch) => {
        request.then(({data}) => {
            dispatch({type: SUBMIT_POST_VOTE, payload: data})
        });
    };
}

减速

export default function(state = {}, action) {
  const {payload} = action
  switch (action.type){
        case SUBMIT_POST_VOTE:
            return {...state, [payload.data.id]: payload.data}

使用它的组件

import { postPostVote } from '../actions';

<span
 className='fa fa-angle-up voteArrow'
 onClick={() => this.props.postPostVote('upVote', id)}
></span>

export default connect(null, {postPostVote})(PostComponent);

所以我试图传递option（upVote || downVote）以及id但我无法理解为什么它会在看到更改后返回错误

非常赞赏，皮特

Answer 1

看起来你在动作中定义字段以及在减速器中使用动作之间存在不匹配。

您将操作定义为{type: SUBMIT_POST_VOTE, payload: data}，但在减速器中使用action.payload.data.id。我认为payload.data实际上并不存在，你真正需要的是action.payload.id。

UI更改后，Redux reducer提示TypeError未定义

API文件

Action Creator（使用redux-thunk）

减速

使用它的组件

1 个答案: