reactjs - TypeError: Cannot read property 'value' of undefined 使用 Redux 向数组添加值时

Question

计数器容器

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import PropType from 'prop-types';
import Counter from '../components/Counter';
import * as counterActions from '../store/modules/counter';
import * as postActions from '../store/modules/post';

class CounterContainer extends Component {
  handleIncrement = () => {
    const { CounterActions } = this.props;
    CounterActions.increment();
  }

  handleDecrement = () => {
    const { CounterActions } = this.props;
    CounterActions.decrement();
  }

  addDummy = () => {
    const { PostActions } = this.props;
    console.log(PostActions);
    PostActions.addDummy({
      content: 'dummy',
      userUID: 123,
    });
  }

  render() {
    const { handleIncrement, handleDecrement, addDummy } = this;
    const { number } = this.props;

    return (
      <Counter
        onIncrement={handleIncrement}
        onDecrement={handleDecrement}
        addDummy={addDummy}
        number={number}
      />
    );
  }
}


CounterContainer.propTypes = {
  number: PropType.number.isRequired,
  CounterActions: PropType.shape({
    increment: PropType.func,
    decrement: PropType.func,
  }).isRequired,
};


export default connect(
  state => ({
    number: state.counter.number,
  }),
  dispatch => ({
    CounterActions: bindActionCreators(counterActions, dispatch),
    PostActions: bindActionCreators(postActions, dispatch),
  }),
)(CounterContainer);

邮政容器

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
// import { ListItem } from 'react-native-elements';
import { Text } from 'react-native';
import PropType from 'prop-types';
import Post from '../components/Post';
import * as postActions from '../store/modules/post';

class PostContainer extends Component {
  refreshing = () => {}

  onRefresh = () => {}

  renderItem = ({ item }) => (<Text>{item.content}</Text>)

  render() {
    const { renderItem } = this;
    const { postList } = this.props;

    return (
      <Post
        postList={postList}
        renderItem={renderItem}
      />
    );
  }
}

export default connect(
  state => ({
    postList: state.post.postList,
  }),
  dispatch => ({
    CounterActions: bindActionCreators(postActions, dispatch),
  }),
)(PostContainer);

模块/帖子

import { createAction, handleActions } from 'redux-actions';

const initialState = {
  postList: [{
    content: 'test',
    userUID: 123,
  },
  {
    content: '123123',
    userUID: 123123,
  },
  ],
};

const ADD_DUMMY = 'ADD_DUMMY';

export const addDummy = createAction(ADD_DUMMY, ({ content, userUID }) => ({ content, userUID }));

const reducer = handleActions({
  [ADD_DUMMY]: (state, action) => ({
    ...state,
    postList: [action.data, ...state.postList],
  }),
}, initialState);

export default reducer;

单击该按钮会在 postList 中添加一个虚拟对象。但是，当我单击按钮时，我得到

TypeError：无法读取未定义错误的属性“内容”。

我以为我做的和倒计时教程一样。但是倒计时有效。添加我制作的假人不起作用。哪里出错了？

直到我单击 Add Dummy Data 按钮列表才有效。

标签： reactjsreact-nativereact-redux

Answer 1

我改变action.data -> actions.payload

const reducer = handleActions({
  [ADD_DUMMY]: (state, action) => ({
    ...state,
    postList: [action.payload, ...state.postList],
  }),
}, initialState);

这只是一个错误。