为何数组map方法抛出TypeError: props.msg.map is not a function？

核心问题分析 #

你的代码存在三个关键错误，直接导致msg的类型从数组变为字符串，进而无法调用map方法：

• 状态混淆：将聊天记录数组和输入框文本用同一个msg状态存储，输入框的onChange会把数组直接覆盖成字符串。
• send函数逻辑错误：点击发送时，你试图把已经变成字符串的msg追加到数组，但此时msg的类型已经改变，后续输入又会再次覆盖数组状态。
• MsgComponent渲染错误：map返回的是对象而非JSX元素，React无法正常渲染。

修正后的代码 #

Chat组件代码 #

import React, { useState } from 'react';
import Header from './Header';
import { Box, TextField, Button } from '@mui/material';
import MsgComponent from './MsgComponent';

// 修正props接收方式，onIdSubmit作为props属性传入
const Chat = ({ onIdSubmit }) => {
    // 拆分状态：inputMsg存输入框文本，msgList存聊天记录数组
    const [inputMsg, setInputMsg] = useState('');
    const [msgList, setMsgList] = useState([]);
    const [ismsg, setIsmsg] = useState(true);
    const [btnVal, setBtnval] = useState(true);

    const send = () => {
        if (!inputMsg.trim()) return; // 过滤空消息
        // 将输入框文本追加到聊天记录数组
        setMsgList(prev => [...prev, inputMsg]);
        setInputMsg(''); // 清空输入框
        setIsmsg(false);
        setBtnval(false);
    };

    const handleSubmit = (e) => {
        e.preventDefault();
        send();
        // 若onIdSubmit需处理逻辑，可在此调用，例如：onIdSubmit(inputMsg);
    };

    return (
        <Box sx={{ color: 'blue' }}>
            <Box sx={{ position: 'absolute', top: '0%' }}>
                <Header />
            </Box>
            <Box>
                <MsgComponent msg={msgList} />
            </Box>
            <Box sx={{ position: 'absolute', bottom: '1%' }}>
                <form onSubmit={handleSubmit}>
                    <TextField
                        multiline={true}
                        maxRows={3}
                        placeholder='message'
                        value={inputMsg}
                        onChange={(e) => setInputMsg(e.target.value)}
                    />
                    <Button type="submit">send</Button>
                </form>
            </Box>
        </Box>
    );
};

export default Chat;

MsgComponent组件代码 #

import React from 'react';

const MsgComponent = (props) => {
    // 修正map返回值，返回可渲染的JSX元素
    const messages = props.msg.map((message, index) => {
        return <div key={index}>{message}</div>;
    });

    return (
        <div>
            {messages}
        </div>
    );
};

export default MsgComponent;

关键修改说明 #

• 拆分状态：将输入框文本和聊天记录拆分为独立状态，彻底避免类型混淆。
• 修正状态更新逻辑：输入框仅更新文本状态，发送时才将文本追加到聊天数组。
• 修复渲染逻辑：让map返回React可识别的JSX元素，而非普通对象。
• 统一表单提交：通过按钮的type="submit"触发提交逻辑，避免重复绑定事件。

内容的提问来源于stack exchange，提问作者user3548951