React自定义renderItems函数调用返回undefined问题求助

核心问题 #

你的renderItems函数没有返回arr.map()的执行结果，函数执行完毕后默认返回undefined，因此调用时控制台输出undefined，也无法渲染列表项。

修复方案 #

方案1：显式返回map结果

修改renderItems函数，在arr.map()前添加return语句，让函数返回map生成的元素数组：

const renderItems = (arr) => {
    return arr.map(({ id, name }) => {
        return (
            <li className="list-group-item" key={id}>
                {name}
            </li>
        );
    });
};

方案2：使用箭头函数隐式返回

去掉函数体的大括号，利用箭头函数的隐式返回特性，直接返回map的结果：

const renderItems = (arr) => 
    arr.map(({ id, name }) => (
        <li className="list-group-item" key={id}>
            {name}
        </li>
    ));

额外优化建议 #

初始化peopleList时设置空数组作为默认值，避免接口请求完成前arr为undefined导致map调用报错：

const [peopleList, setPeopleList] = useState([]);

最终调用方式 #

在return中直接调用renderItems(peopleList)即可，无需包裹console.log（如需调试可单独写在其他位置）：

<ul className="item-list list-group">
    {renderItems(peopleList)}
</ul>

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