javascript - 如何将生成的元素插入数组并在 React 中渲染它们

Question

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

说明:

providers:API提供的数据，

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

moduleData:返回 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？