Question

如何根据以下两个条件使用map返回一组新数组：

数组长度不应为0
角色应该是主持人

这是我原来的回复看起来像

映射响应的反应函数

_getList(memberships) {
    const items = memberships.map((membership) => {
        return (
            <RadioButton
                value={membership.forum.slug}
                label={membership.forum.title} />
        );
    });

    return(
        <RadioButtonGroup>
            {items}
        </RadioButtonGroup>
    );
}

在我的渲染功能中，我正在检查长度是否为0

const renderedList = this._getList(UserStore.getState().memberships.length !== 0);

我应该如何添加另一个检查，返回的新数组应该只包含role === moderator

的数据

Answer 1

您想要查看Array API的.filter方法。

const items = memberships
    .filter(item => item.role === 'moderator')
    .map((membership) => {
        return (
            <RadioButton
                value={membership.forum.slug}
                label={membership.forum.title} />
        );
    })

.filter将遍历数组的所有成员并返回一个新数组，其中包含通过所提供函数实现的测试的所有元素。如果memberships数组为空，则只返回一个空数组。

这假定memberships属性始终是一个数组。包含值的数组或空数组（[]）。如果memberships属性可能丢失，您仍需要添加支票，例如renderedList。

Answer 2

使用过滤器

_getList(memberships) {
    const items = (memberships.filter(membership => membership.role === 'moderator') || []).map((membership) => {
        return (
            <RadioButton
                value={membership.forum.slug}
                label={membership.forum.title} />
        );
    });

    if(items.length === 0) return null;

    return(
        <RadioButtonGroup>
            {items}
        </RadioButtonGroup>
    );
}

然后你可以这样做：

const renderedList = this._getList(UserStore.getState().memberships);

if(renderedList) {
    this.renderSomething();
} else {
    this.renderSomethingElse();
}

使用map方法返回一组新数组

2 个答案: