React.js中提取array.map()为函数后无渲染且无报错求助

直接原因：函数未返回映射结果 #

你的dataMap函数内部执行了data.map()，但没有把这个map生成的元素数组返回出去。当你在JSX里调用dataMap()时，函数默认返回undefined，而React不会渲染undefined，所以页面上看不到任何内容。

修复只需要给map的结果加上return：

const dataMap = () => {
    // 关键：返回map生成的组件数组
    return data.map(data => {
        key++;
        return (
            <div key={key}>
                <h2>{data.title}</h2>
                <p className="apart">
                    Nr: {data.id} <span>Status: {!data.completed && <span>Not </span>}completed</span>
                </p>
                <h3>User: {data.userId}</h3>
                <br/><hr/><br/>
            </div>
        );
    });
}

重要优化：别用递增数字当key #

你现在用key++生成key是React的反模式——这种key不与数据绑定，当数据的顺序变化、新增或删除时，React无法正确识别组件的身份，会导致不必要的重渲染，甚至出现状态错乱的问题。

直接用每条数据里的唯一标识data.id作为key才是正确的做法，同时把循环变量名改成item避免和外层的data变量混淆：

const dataMap = () => {
    return data.map(item => {
        return (
            <div key={item.id}>
                <h2>{item.title}</h2>
                <p className="apart">
                    Nr: {item.id} <span>Status: {!item.completed && <span>Not </span>}completed</span>
                </p>
                <h3>User: {item.userId}</h3>
                <br/><hr/><br/>
            </div>
        );
    });
}

进阶：整合多条件过滤逻辑 #

既然你有三个completed选项（all/completed/uncompleted），可以把过滤逻辑也放到函数里，让代码更简洁易维护：

const renderTodos = () => {
    // 根据completed状态过滤数据
    let filteredTodos = data;
    if (completed === 'completed') {
        filteredTodos = data.filter(item => item.completed);
    } else if (completed === 'uncompleted') {
        filteredTodos = data.filter(item => !item.completed);
    }

    // 渲染过滤后的todo列表
    return filteredTodos.map(item => (
        <div key={item.id}>
            <h2>{item.title}</h2>
            <p className="apart">
                Nr: {item.id} <span>Status: {!item.completed && <span>Not </span>}completed</span>
            </p>
            <h3>User: {item.userId}</h3>
            <br/><hr/><br/>
        </div>
    ));
}

然后在JSX里直接调用：

{data && allToDos && renderTodos()}

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