React JS：ForEach 函数没有返回任何内容

Question

我的代码中有一个 JS 函数，它应该为拆分字符串的每个元素返回一个 React 组件，但由于某种原因，当我在主“return()”上调用它时，该函数不是返回任何东西。我试图将函数直接放在 return() 中，但同样的事情发生了。我以前从未遇到过这种情况，我不知道它是什么。

这是我的代码：

import React from 'react';

import DatabaseLiLine from './DatabaseLiLine';

const DatabaseLiSection = ({ className, children, classId }) => {
    const example = "Use,This,As,An,Example";
    const splitLiTitles = example.split(",");

    const returnLines = () => {
        splitLiTitles.forEach(element => {
            return(
                <DatabaseLiLine>
                    {element}
                </DatabaseLiLine>
            );
        })
    }
    return (
        <li className={className}>
            <a href="/">{children}</a>
            <div id={classId} className="consult_box">
                {returnLines()}
            </div>
        </li>
    );
}

export default DatabaseLiSection;

Answer 1

forEach 不返回任何内容。更改您的代码以使用map 方法。

    const returnLines = () => {
        splitLiTitles.map(element => {
            return(
                <DatabaseLiLine>
                    {element}
                </DatabaseLiLine>
            );
        })
    }

这里有点脑子放屁，但我忘了你是否还需要返回 map 方法，比如在splitLiTitles.map... 之前添加return。我认为没有它应该可以工作，但如果它不尝试在前面添加返回。