ReactJS：循环对象答案

【问题标题】：ReactJS: looping through objectReactJS：循环对象
【发布时间】：2017-09-20 08:10:26
【问题描述】：

我是 react 新手，我很困惑如何将我的对象映射到我的 react 组件

我的对象看起来像这样

const LinkValue = [{
        'XYZ':['About Us','Core Values','Careers','contact Us']
    },{
        'Help':['Payments','Saved Cards','FAQ']
    }]

反应组件

const LinkLoop = map(LinkValue,(value,key)=>{
        return(
                <div className="col-md-2 col-sm-3 col-xs-6" key={key}>
                <div className="quicklinks-card">
                    <h3>{value[key]}</h3>
                    <ul className="list-unstyled">

                        <li>
                            <a href="#">value[key]</a>
                        </li>
                        <li>
                            <a href="#">value[key]</a>
                        </li>
                        <li>
                            <a href="#">value[key]</a>
                        </li>
                    </ul>
                </div>
            </div>
        )
    })

我不清楚如何循环遍历我的对象，而且我的对象值的长度也不相同

预期输出

<div className="col-md-2 col-sm-3 col-xs-6">
    <div className="quicklinks-card">
        <h3>XYZ</h3>
            <ul className="list-unstyled">

                  <li>
                       <a href="#">About Us</a>
                  </li>
                  <li>
                        <a href="#">Core Values</a>
                  </li>
                   <li>
                        <a href="#"> Careers </a>
                   </li>
                  <li>
                        <a href="#">contact Us</a>
                   </li>
             </ul>
     </div>
</div>
<div className="col-md-2 col-sm-3 col-xs-6">
    <div className="quicklinks-card">
        <h3>XYZ</h3>
            <ul className="list-unstyled">


                  <li>
                        <a href="#"> Payments </a>
                  </li>
                   <li>
                        <a href="#"> Saved Cards </a>
                   </li>
                  <li>
                        <a href="#"> FAQ </a>
                   </li>
             </ul>
     </div>
</div>

我想循环遍历我的对象并将其放置在我的组件中..

提前致谢。

【问题讨论】：

有点混淆你的代码我认为value[key] 给出了数组，这对<a> 标记不利。你能发布预期的输出吗？
数组中的每个对象是否有一个键，后跟一个数组，或者可以有多个
感谢您的帮助。我已经添加了我的预期输出。希望这能让事情变得清晰
@ShubhamKhatri。是的，我的对象只有一个键并且有元素数组

标签： javascript reactjs object mapping

【解决方案1】：

您应该使用Object.keys(obj)[0] 获取第一个键，然后从这些键中使用map 映射到数组

    const LinkValue = [{
            'XYZ':['About Us','Core Values','Careers','contact Us']
        },{
            'Help':['Payments','Saved Cards','FAQ']
        }]

    const LinkLoop = LinkValue.map((value,key)=>{
            return(
                     <div className="col-md-2 col-sm-3 col-xs-6" key={key}>
                            <div className="quicklinks-card">
                            <h3>{Object.keys(value)[0]}</h3>
                             <ul className="list-unstyled">
                                  {value[Object.keys(value)[0]].map((obj, idx) => (
                                      <li key={idx}>
                                          <a href="#">{obj}</a>
                                       </li>

                                  ))}

                             </ul>
                        </div>
                   </div>
            )
        })

【讨论】：

@PriyeshKumar OP 说内部对象只有一个键，因此我将答案修改为不循环键而是只使用第一个键
很高兴有帮助:)
我可以用“value[Object.keys(value)[key]]”代替.....value[Object.keys(value)[0]]
@Coeus 因为你只需要你应该使用的对象的第一个键 [0] 而不是 [key]
不，我希望它是动态的..我希望两个对象都显示..你能修改答案吗..这会有很大帮助