如何使用 React.js 在 JSX 中循环对象

Posted 2023-02-21

【中文标题】如何使用 React.js 在 JSX 中循环对象

【英文标题】：How to loop through object in JSX using React.js

【发布时间】：2016-12-25 15:59:10

【问题描述】：

所以我有一个 React.js 组件，我想循环访问一个我导入的对象以向它添加 html 选项。这是我尝试过的，既丑陋又不起作用：

import React from 'react';
import AccountTypes from '../data/AccountType';

const AccountTypeSelect = (props) =>   
  return (
    <select id=props.id className = props.classString style=props.styleObject>
        <option value="nothingSelected" defaultValue>--Select--</option>
        
            $.each(AccountTypes, function(index) 
                <option val=this.id>this.name</option>
            )
        
    </select>
  );
;

export default AccountTypeSelect;

我从上面的代码在控制台中收到了这个错误：

invariant.js?4599:38 - Uncaught Invariant Violation：对象作为 React 子项无效（发现：对象带有键 id、name、enabled、additionalInfo）。如果您打算渲染一组子项，请改用数组或使用 React 附加组件中的 createFragment(object) 包装对象。检查AccountTypeSelect的渲染方法。

我真的需要将每个对象转换成一个数组或用 createFragment 包装它来使用它吗？这种情况下的最佳做法是什么？

【参考方案1】：

注意事项：

您的数据在 Object 中，而不是在数组中：因此要遍历它，您必须使用 Object.keys(yourObject).map() 而不是 yourObject.map()

考虑到这一点；这是解决方案

var user = 
     fname:'John',
     lname : 'Doe',
     email:'[e-mail]'


class App extends Component 
  render() 
    return (
      <p>
      <ul>
        
          Object.keys(user).map((oneKey,i)=>
            return (
                <li key=i>user[oneKey]</li>
              )
          )
        

      </ul>    
      </p>
    );
  

【参考方案2】：

用map代替$.each：

AccountTypes.map(function(a) 
     return (
         <option key=a.id val=a.id>a.name</option>
     );
 )

【讨论】：

key 属性是什么 - 为什么我需要使用它？似乎很奇怪，当我想要做的只是放在一个简单的选项标签中时，我需要添加一个看似任意的属性。

关键属性在此处的“对账”下进行了描述：facebook.github.io/react/docs/multiple-components.html。但基本上是为了确保在动态生成子元素时反应正确更新 DOM（我知道这是一个弱解释，但我不想在评论中重复反应文档）。在这方面，我使用循环变量的形式很差，所以我更新了答案。对不起！

【参考方案3】：

你应该使用 map 来循环：

AccountTypes.map((accountType) => 
  <option value=accountType.id>accountType.name</option>)

【参考方案4】：

要渲染子列表，您必须为每个子添加 key 属性，以便 React 正确渲染它们。试试这个：

使用 JQuery 映射（适合函数式编程）

   
        $.map(AccountTypes, function(type,index) 
            return <option key=type.id val=type.id>type.name</option>
        )
    

使用法线贴图：

AccountTypes.map((type) => 
   return <option key=type.id 
                  val=type.id>
            type.name
          </option>
)

【讨论】：

我建议在键值中使用某种前缀以避免重复键以及在渲染多个集合时出现相应的警告和错误。

第一个例子不起作用，因为$.each 没有返回任何东西（或者至少不是正确的东西）。

回调返回的内容无关紧要$.each 只是在这里使用的错误方法。请参阅文档：api.jquery.com/jquery.each。

查看我之前的评论 ;)