反应中的简单for循环此代码在for循环中给出错误

Posted 2023-02-21

【中文标题】反应中的简单for循环此代码在for循环中给出错误

【英文标题】：Simple for loop in react This code gives Errors at for loop

【发布时间】：2017-10-09 22:17:05

【问题描述】：

这会在 for 循环中产生错误

let contact=[name:"Mithun",name:"Keerthana",name:"Jayendara",name:"Shivani"]

for (i=0;i<list;i++)


 <h1>content[0].name</h1>

【问题讨论】：

1) ***.com/questions/29149169/… 2) ***.com/questions/29859380/… 3) ***.com/questions/22876978/loop-inside-react-jsx

【参考方案1】：

您需要在 for 循环中使用 contact.length 而不是 list。您还需要使用 contact[i] 而不是 content[0]。

for (i = 0; i < contact.length; i++) 
    <h1>contact[i].name</h1>

如果您使用的是 TSX (TypeScript + React)，则可以使用 map 函数来简化此操作。

return contact.map(c => <h1>c.name</h1>);

【参考方案2】：

给你一些建议

在您的问题中，您循环的是list，而不是您应该循环的是contacts

据我了解，您希望从联系人对象中创建一个 JSX 元素。所以你需要把它推入一个数组，然后像这样渲染它

代码：

let contact=[name:"Mithun",name:"Keerthana",name:"Jayendara",name:"Shivani"]
var content = [];
for (i=0;i<contact;i++)

 content.push(<h1>contact[i].name</h1>);

当你想在你的渲染函数中渲染它时，你会做类似的事情

return (
   <div>content</div>
)

不过，既然您使用的是 react，那么您应该使用更方便易用的地图功能

你的代码看起来像

 render() 
     return(
         <div>
            contacts.map(function(item) 
                 return (<h1>item.name</h1>)
            )
         </div>
     )