Question

使用react-redux connect（）时，我具有此配置。

 const mapStateToProps = state => ({
      ...state
    });
    const mapDispatchToProps = dispatch => ({
      addMessage: msg => dispatch(addMessage(msg))
    });

    export default connect(
      mapStateToProps,
      mapDispatchToProps
    )(RoomChat);

使用this.props.chats时得到"TypeError: Cannot read property 'map' of undefined"。

这是状态，是具有“用户名”和“内容”字段的对象的数组：

chats = [{ content: '', username: '' }]

在RoomChat.js中定义如下：

  this.state = {
      chats: []
    };

这是定义redux存储的store.js：

import { createStore } from 'redux';
import MessageReducer from './reducers/MessageReducer';
function configureStore(chats = [{ content: '', username: '' }]) {
  return createStore(MessageReducer, chats);
}
export default configureStore;

减速器：

export default (state, action) => {
  switch (action.type) {
    case 'addMessage':
      return {
        content: action.text,
        username: 'R'
      };
    default:
      return state;
  }
};

动作：

export function addMessage(text) {
  return { type: 'addMessage', text };
}

这里出了什么问题？，到目前为止，我已经尝试了多种配置，但均未成功

Answer 1

在您的mapStateToProps函数中，您需要执行此操作...

const mapStateToProps = state => ({
  chats: state
});

这是因为您在进行chats时使用createStore(MessageReducer, chats)数组创建商店。

因此state自动为chats

更新除了@smoak的评论，您还需要像这样更新您的reducer

export default (state, action) => {
  switch (action.type) {
    case 'addMessage':
      return [
        ...state,
        {
          content: action.text,
          username: 'R'
        }
      ];
    default:
      return state;
  }
};

Answer 2

Mabye试试这个 const mapStateToProps = state => {return {chats: state.chats}}; 或这个 const mapStateToProps = state => { return {...state}}; 您需要在mapStateToProps和mapDistpachToProps中返回对象。

在React中使用Redux存储时状态未定义

2 个答案: