React组件渲染报错：JSX子元素类型不匹配及代码修复咨询

核心问题1：map回调未返回组件 #

你写的components.map(c => { c.component })用了块级大括号但没有return语句，导致map返回的是一个全为undefined的数组。当React尝试渲染这个数组时，多个undefined作为div的子元素，触发了TypeScript的类型错误。

核心问题2：缺少key属性 #

React要求列表渲染的每个子元素必须有唯一的key属性，这不仅能避免运行时警告，也能让TypeScript的类型检查更准确。

额外的类型和逻辑问题 #

• Component类型中的name字段用了大写的String，这是TypeScript中的包装对象类型，应该改用小写的string原始类型。
• getComponent函数中，当用户输入的内容不匹配任何组件名称时，filter返回空数组，取[0]会得到undefined，直接添加到components数组会导致后续渲染异常。

修正后的完整代码 #

import React, { useState, FormEvent } from 'react';
import A from './components/A'
import B from './components/B'
import C from './components/C'

// 修正类型定义
type Component = {
  name: string,
  component: JSX.Element
};

const [components, setComponents] = useState<Component[]>([]);
const [userInput, setUserInput] = useState<string>("");
const data = [
        { name: "a", component: <A/> },
        { name: "b", component: <B/> },
        { name: "c", component: <C/> },
    ];

function getComponent(e: FormEvent) {
        e.preventDefault();
        let c = data.filter((c) => c.name === userInput)[0];
        // 避免添加undefined
        if (c) {
            setComponents((prev) => [...prev, c]);
        }
}

return (
  <div>
    <form onSubmit={(e) => getComponent(e)}>
        <input
            type="text"
            value={userInput}
            onChange={(e) => setUserInput(e.target.value)}
        />
    </form>
    <h1>Here are all components rendered</h1>
    {/* 修复map回调并添加key */}
    {
      components.map(c => {
        // 添加return或者改用箭头函数简写
        return <div key={c.name}>{c.component}</div>;
        // 或者简写：components.map(c => <div key={c.name}>{c.component}</div>)
      })
    }
 </div>
);

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