时间戳

首页 > 解决方案 > 如何修复 react-redux 中的“TypeError：this.props.messages.map 不是函数”

reactjs - 如何修复 react-redux 中的“TypeError：this.props.messages.map 不是函数”

问题描述

我正在尝试通过 mapDispatchToProps() 将道具传递给我的组件。但是，我遇到了这个问题

TypeError: this.props.messages.map is not a function
DisplayMessages.render
C:/Users/User/Desktop/Project/first-react-redux/src/DisplayMessages.js:38
  35 |             <h2>Type in a new message</h2>
  36 |             <input value={input} onChange={this.handleChange} />
  37 |             <button onClick={this.submitMessage}>Submit</button>
> 38 |             <ul>{this.props.messages.map((message, index) => <li key={index}>{message}</li>)}</ul>
     | ^  39 |         </div >
  40 |     )
  41 | }

如果我取消注释第 38 行，我的页面可以显示。但是，单击按钮后，我收到此错误消息：

TypeError: Object(...) is not a function
submitNewMessage
C:/Users/User/Desktop/Project/first-react-redux/src/DisplayMessagesContainer.js:18
  16 |     return {
  17 |         submitNewMessage: (newMessage) => {
> 18 |             dispatch(addMessage(newMessage))
  19 |         }
  20 |     }
  21 | };

我是 React-redux 的新手，我不确定出了什么问题。我目前正在处理的示例来自 freecodecamp，我已经在代码编辑器中测试了这些代码并通过了挑战（除了这次我是在自己的机器上进行并构建自己的文件树。）

这就是我的组件的样子：

import React from 'react';

export default class DisplayMessages extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            input: '',
        }
    }

    handleChange = (event) => {
        this.setState({
            input: event.target.value
        })
    }

    submitMessage = () => {
        this.props.submitNewMessage(this.state.input)
        this.setState({
            input: '',
       })
    }


    render() {
        const { input} = this.state
        return (
            <div>
                <h2>Type in a new message</h2>
                <input value={input} onChange={this.handleChange} />
                <button onClick={this.submitMessage}>Submit</button>
                <ul>{this.props.messages.map((message, index) => <li key={index}>{message}</li>)}</ul>
            </div >
        )
    }
}

这是我的容器：

import DisplayMessages from './DisplayMessages';
import { connect } from 'react-redux';
import addMessage from './redux/actions'

mapStateToProps
const mapStateToProps = (state) => {
    return { messages: state }
};

const mapDispatchToProps = (dispatch) => {
    return {
        submitNewMessage: (message) => {
            dispatch(addMessage(message))
        }
    }
};

const DisplayMessagesContainer = connect(mapStateToProps, mapDispatchToProps)(DisplayMessages)

export default DisplayMessagesContainer

我的 reducer.js：

import { combineReducers } from 'redux';
import types from './types';

const defaultState = [];
const messageReducer = (state = defaultState, action) => {
    switch (action.type) {
        case types.ADD:
            return [...state].concat(action.message)
            break;
        default:
            return state
    }
}

const rootReducer = combineReducers({
    message: messageReducer
});

export default rootReducer;

我为动作创建者准备的 action.js：

import types from './types.js';

const addMessage = (message) => {
    return {
        type: types.ADD,
        message: message
    }
}

export default {
    addMessage,
}

还有我的 type.js：

const ADD = "ADD"

export default {
    ADD,
}

那么我的代码到底出了什么问题呢？

对此的任何帮助都非常感谢。

谢谢

编辑：我已经确认 this.props.messages 是一个对象而不是一个数组。但我的进一步问题是：为什么我能够在 freecodecamp 的代码编辑器中映射对象，但现在不行？我该如何解决这个问题？

标签： reactjsreduxreact-redux

解决方案

@chubbybunnymap function仅适用于数组。检查是否this.props.messages是一个数组。

推荐阅读