如何将生成的元素推入数组并在 React 中呈现它们

Question

在 React 应用程序中，我需要为数组中的所有元素生成 HTML 代码并呈现它们。

解释：

提供商：数据由API、

提供

PluginsProviderData: HTML 元素由另一个组件生成，

moduleData: returns 5 个对象。我需要为每个对象生成 "PluginsProviderData" 元素。

_getConfigurationList() {
    const { providers } = this.props;
    let providersConfigurationList = [];
    if (providers != undefined) {
        let moduleData = providers[3].modules;
        providersConfigurationList = moduleData.forEach(function(data) {
            return (
                <PluginsProviderData key={data._id} title={data.name} headerId={"header" + data._id} manageId={"manage" + data._id}>                        
                </PluginsProviderData>
            );
        });
    }
    return providersConfigurationList;
    console.log(providersConfigurationList);
}

render() {

    const { providers } = this.props;

    let configurationList = this._getConfigurationList();

    return (
        <div>
            <div class="row topSpace">
                <div class="small-12 columns highLimiter">
                     {configurationList}
                </div>
            </div>
       </div>
    );
}

有人可以告诉我如何处理这样的任务吗？我试图创建一个包含 moduleData.forEach 部分的变量并将其推送到 providersConfigurationList 数组，但该数组始终为空。我不确定我犯了什么错误。

提前致谢！

Answer 1

moduleData.map 而不是 moduleData.forEach?

如何将生成的元素推入数组并在 React 中呈现它们

How to push generated elements into array and render them in React

javascript

arrays

foreach

rendering

reactjs