Reactjs 用户界面更改后，Redux reducer提示TypeError未定义

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

我现在遇到了一个我无法解决的问题，当我在一篇文章上投票时，我可以看到用户界面发生了变化（+1/-1投票），但只是一秒钟后出现了一个错误提示

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

我的组件的结构如下

API文件 动作创建者（使用redux thunk） 减速器 使用它的组件

从“../actions”导入{postPostVote}；
this.props.postPostVote（'upVote'，id）}
>
导出默认连接（null，{postPostVote}）（PostComponent）；

---

因此，我试图传递

选项

（upVote | | downVote）以及一个id，但我不明白为什么它会在看到更改后返回错误

非常感谢，

---

peter

看起来您在操作中定义字段的方式与在reducer中使用操作的方式不匹配

---

您将您的操作定义为

{type:SUBMIT\u POST\u VOTE，payload:data}

，但在reducer中使用

action.payload.data.id

。我假设

payload.data

实际上不存在，而您真正需要的是

action.payload.id

这太好了，我真的没有想到我在action creator中实际做的是分配。将其作为键值对进行更多思考。对这件事很陌生，哈。谢谢

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

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);