javascript - ReactJS:循环对象

Question

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

我的对象看起来像这样

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

react 组件

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>

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

提前致谢。

Answer 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>
            )
        })