React.js如何根据id筛选数组元素并映射渲染对应内容组件

核心错误原因 #

• 数组内id为数字类型，你之前的判断用了字符串"1"做严格相等匹配，类型不匹配导致返回空结果
• 你定义的数组名称为Top，代码里误写为TopBox，变量名错误会直接抛出引用报错
• React组件名称首字母必须大写，你的renderedContent不符合规范，可能导致组件无法正常渲染

基础ID匹配实现代码 #

首先是正确的筛选+渲染逻辑，单条匹配优先用find方法，性能优于filter：

// 先正确导入你定义的Top数组和Content组件
import Top from './Top'; // 替换为你实际的文件路径
import Content from './Content'; // 替换为你实际的文件路径

function createContent(selectedObject) {
    // 用展开运算符简化属性传递，后续新增字段不需要手动补传
    return <Content key={selectedObject.id} {...selectedObject} />;
}

// 组件名首字母大写
function RenderedContent() {
    // 匹配id为1的对象
    const targetItem = Top.find(item => item.id === 1);
    // 兜底处理，匹配不到时避免报错
    if (!targetItem) return <div>暂无对应内容</div>;

    return <div>{createContent(targetItem)}</div>;

    // 如果你需要坚持使用filter+map的写法，可替换为下方代码：
    // return <div>{Top.filter(item => item.id === 1).map(createContent)}</div>
}
export default RenderedContent;

pathname匹配实现（兼容多页面场景） #

如果配合React Router使用，可以直接通过当前页面路径自动匹配对应内容：

import { useLocation } from 'react-router-dom';
import Top from './Top';
import Content from './Content';

function RenderedContent() {
    // 获取当前页面路径
    const currentPath = useLocation().pathname;
    const targetItem = Top.find(item => item.path === currentPath);

    if (!targetItem) return <div>404 页面不存在</div>;
    return <Content {...targetItem} />;
}
export default RenderedContent;

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