React项目Dropdown组件map调用报错，需加载MongoDB语言数据

错误原因分析 #

报错Uncaught TypeError: Cannot read properties of undefined (reading 'map')的核心原因有三点：

• <DropdownMenu />组件调用时未传入data属性，导致组件内部data为undefined，调用map方法触发错误
• 前端缺少从后端MongoDB获取语言数据的请求逻辑
• 后端仅配置了MongoDB连接与数据模型，未提供供前端获取数据的API接口

分步修复方案 #

1. 给DropdownMenu组件添加默认值，避免初始渲染报错 #

修改dropdown.jsx，给data参数设置默认空数组，同时修正MongoDB字段映射（原schema为language_code和language，而非value和name）：

import React from "react";

function DropdownMenu({ data = [] }) {
  return (
    <div>
      <h1>Dropdown Menu</h1>
      <select>
        {data.map((item) => (
          <option key={item.language_code} value={item.language_code}>
            {item.language}
          </option>
        ))}
      </select>
    </div>
  );
}

export default DropdownMenu;

2. 后端添加API接口，返回MongoDB中的语言数据 #

在服务器端index.js中添加Express接口（需确保已安装express依赖）：

const express = require('express');
const app = express();

// 新增接口：获取所有语言数据
app.get('/api/languages', async (req, res) => {
  try {
    const languages = await Dropdown.find();
    res.json(languages);
  } catch (error) {
    res.status(500).json({ message: 'Failed to fetch languages', error });
  }
});

// 启动服务器，端口可根据实际调整
const PORT = 3001;
app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

3. 前端添加数据请求逻辑，将数据传入DropdownMenu #

修改chat/index.jsx，使用useState存储数据，useEffect发起请求，并将数据传递给DropdownMenu：

import React, { useState, useEffect } from 'react';
import {
    useMultiChatLogic,
    MultiChatSocket,
    MultiChatWindow,
    ChatSettings,
} from 'react-chat-engine-advanced';
import Header from '@/components/customHeader';
import StandardMessageForm from '@/components/customMessageForms/StandardMessageForm';
import Ai from '@/components/customMessageForms/Ai';
import AiAssist from '@/components/customMessageForms/AiAssist';
import DropdownMenu from '@/components/Dropdown/dropdown';

function Chat({ user, secret }) {
    const chatProps = useMultiChatLogic(
        import.meta.env.VITE_PROJECT_ID,
        user,
        secret
    );
    const [languageData, setLanguageData] = useState([]);

    useEffect(() => {
        const fetchLanguages = async () => {
            try {
                const res = await fetch('http://localhost:3001/api/languages');
                const data = await res.json();
                setLanguageData(data);
            } catch (err) {
                console.error('Fetch languages failed:', err);
            }
        };
        fetchLanguages();
    }, []);

    return (
        <div style={{ flexBasis: '100%' }}>
            <MultiChatSocket {...chatProps} />
            <MultiChatWindow
                {...chatProps}
                style={{ height: '100vh' }}
                renderChatHeader={(chat) => <Header chat={chat} />}
                renderChatSettings={(props)=>{
                    return (
                        <div>
                            <ChatSettings creds={props.creds} chat={props.chat}/>
                            <div>
                                <DropdownMenu data={languageData} />
                            </div>
                        </div>
                    );
                }}
                renderMessageForm={(props) => {
                    if (chatProps.chat?.title.startsWith('AiChat_')) {
                        return <Ai props={props} activeChat={chatProps.chat} />;
                    }
                    if (chatProps.chat?.title.startsWith('AiAssist_')) {
                        return (
                            <AiAssist
                                props={props}
                                activeChat={chatProps.assist}
                            />
                        );
                    }
                    return (
                        <StandardMessageForm
                            props={props}
                            activeChat={chatProps.chat}
                        />
                    );
                }}
            />
        </div>
    );
}

export default Chat;

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