Redux reducer 提示 TypeError undefined after UI change

Question

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

我现在遇到了一个我无法理解的问题，当我对 post 投票时，我可以看到 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 但我不明白为什么 returns 可以看到更改后的错误

非常感谢，彼得

Answer 1

您在 action 中定义字段的方式与在 reducer 中使用 action 的方式似乎不匹配。

您将操作定义为 {type: SUBMIT_POST_VOTE, payload: data}，但在 reducer 中，使用 action.payload.data.id。我假设 payload.data 实际上不会存在，而你真正需要的是 action.payload.id.

Redux reducer 提示 TypeError undefined after UI change

Redux reducer prompting TypeError undefined after UI change

reactjs

redux

redux-thunk

API 文件

Action Creator（使用 redux-thunk）

减速器

使用它的组件