React JS：ForEach Function 没有返回任何东西

Question

我的代码中有一个 JS function，它应该为拆分字符串的每个元素返回一个 React 组件，但由于某种原因，当我在主“return()”上调用它时，function 没有返回任何内容。 我试图将 function 直接放在 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 splitLiTitles.map... 。 我认为没有它它应该可以工作，但如果它不尝试在前面添加该返回。