javascript - Array.map 一次渲染相同的标题

Question

我有密码数组，我想显示这些密码 - 每个密码都有一个资源，应该作为标题显示一次所以：将资源作为标题：

资源1：-密码1-密码2-密码0，

资源2：-密码4-密码5，

资源3：-密码6-密码7-密码8-密码9

        this.state.passwords && this.state.passwords.map((item, index) => {
            return (
                <>
                    {item[index] !== item[index + 1] && (  //here I am trying to do this logic
                        <Nav.Item><div className="sidebar-heading-secrets">{item.resource}</div></Nav.Item>
                    )}
                    <span>We render data here</span>
                </>
            )
        })
    }``

标签： javascriptreactjsarraylistarray-map

Answer 1

您缺少地图中的钥匙。使用 React.Fragment 并提供密钥

this.state.passwords && this.state.passwords.map((item, index) => {
            return (
                <React.Fragment key={index}>
                    {item[index] !== item[index + 1] && (  //here I am trying to do this logic
                        <Nav.Item><div className="sidebar-heading-secrets">{item.resource}</div></Nav.Item>
                    )}
                    <span>We render data here</span>
                </React.Fragment>
            )
        })
    }``