NodeJS ReactJS中的Javascript语法[重复]

pkln4tw6 于 2022-11-29 发布在 Node.js

关注(0)|答案(2)|浏览(336)

此问题在此处已有答案：

JSX for...in loop（2个答案）
4天前关闭。
我有一个ReactJS呈现函数，我在其中迭代一个数组以显示如下内容：

render() {
    let object = eval('('+this.props.objectData+')');
    let cd = object.objColAliases;
    return (
        <div>
            {
                cd.map(o=>{
                    return <p>{o}</p>
                })
            }
        </div>
    );
}

这段代码可以正常工作，但在控制台上出现警告：
js：87警告信息：请输入您的密码：列表中的每个子项都应该具有唯一的“键”属性。
，警告是有意义的，map用于遍历Map而不是简单数组。
所以我试着像普通数组一样迭代，如下所示：

render() {
    let object = eval('('+this.props.objectData+')');
    let cd = object.objColAliases;
    return (
        <div>
            {
                for (let i = 0; i < cd.length; i++) {
                    return <p>{o}</p>
                }
            }
        </div>
    );
}

但是现在我在带有“for（let i = 0; i i++）"。如何在此上下文中编写正确的代码？
This是有问题的沙箱。

node.js

来源：https://stackoverflow.com/questions/74561229/javascript-syntax-in-reactjs

2条答案

按热度按时间

nhjlsmyf1#

如果key属性是唯一的，则应将其添加到map中的父标记：

<div>{cd.map((o) => <p key={o}>{o}</p>)}</div>

如果它不是唯一的，您可以在Map时使用index作为key：

<div>{cd.map((o, index) => <p key={index}>{o}</p>)}</div>

但是，请先阅读文档，因为不建议使用索引作为键：https://reactjs.org/docs/lists-and-keys.html

赞(0）回复(0）举报 2022-11-29

omjgkv6w2#

您需要为.map，s中返回的元素提供唯一的key标记

render() {
    let object = eval('('+this.props.objectData+')');
    let cd = object.objColAliases;
    return (
        <div>
            {
                cd.map(o=>{
                    return <p key={o.id}>{o}</p>
                })
            }
        </div>
    );
}

如果o没有唯一属性，也可以使用索引，如下所示

render() {
    let object = eval('('+this.props.objectData+')');
    let cd = object.objColAliases;
    return (
        <div>
            {
                cd.map((o, index) =>{
                    return <p key={index}>{o}</p>
                })
            }
        </div>
    );
}

赞(0）回复(0）举报 2022-11-29

我来回答

NodeJS ReactJS中的Javascript语法[重复]

2条答案

相关问题

热门标签

最新问答