在React中的同一数组上过滤和映射

debugcn 发表于 Dev

唐J生态

我有以下组成部分：

function Params(props) {

    const { Parameters } = useFetchParams();

    return (
        <div className='Params'>
            {
                Parameters && Parameters.map(parameter => {
                    const { Name, Value } = parameter;
                    if (Name.includes(props.filter)) {
                        return (
                            <div className='Param' key={Name}>
                                <p>{Name}</p>
                                <p>{Value}</p>
                            </div>
                        )
                    }
                })
            }
        </div>
    )
}

我只想显示包含我从道具传入的文字的“参数”。您可以看到我当前正在使用if语句，这似乎很笨拙。我想知道是否可以同时映射和过滤此数组。

我尝试将过滤器粘贴在地图的末尾，但它返回错误。

谢谢看

杰伊·科迪斯（Jay Codist）

就像@Yevgen Gorbunkov建议的那样，您正在做的很好，在映射之前进行过滤实际上并不快，尽管它可能更具可读性。但是，可以的。像这样：

function Params(props) {

    const { Parameters } = useFetchParams();

    return (
        <div className='Params'>
            {
                Parameters && Parameters.filter(parameter => parameter.Name.includes(props.filter))
                  .map(parameter => {
                    const { Name, Value } = parameter;
                    return (
                        <div className='Param' key={Name}>
                            <p>{Name}</p>
                            <p>{Value}</p>
                        </div>
                    )
                })
            }
        </div>
    )
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。