javascript - 如何在Reactjs中显示对象内数组的内容

Question

我有一个 React 组件。当用户进行表单选择时，它会检索以下对象(对象的内容根据所做的选择而变化):

数据

jsonObj={
 "name":"main",
 "type":"meat",
 "values":[
      ["chicken","Roast chicken with vegetables"],
      ["beef","Beef and Yorkshire pudding"]
]}

期望的结果

这是我想要在渲染时在屏幕上显示的内容:

<div>
    <label htmlFor="chicken">Roast chicken and vegetables</label>
</div>
<div>
    <label htmlFor="beef">Beef and Yorkshire pudding</label>
</div>

我失败的尝试!

Object.entries(jsonObj["values"]).map(([val,index]))=>{
    return(
        <div>
            <label htmlFor={val[index][0]}>{jsonSub[key][1]}:</label>
        </div>
    )
}

结果是:

Cannot read property '0' of undefined.

当我在浏览器控制台中尝试它时，我收到“未捕获的语法错误:格式错误的箭头函数参数列表”。有谁能帮助我得到我想要的结果吗？!

非常感谢!

凯蒂

Answer 1

Object.entries方法的目的是从对象获取数组，但是你的“值”已经是数组了，所以直接使用map

jsonObj["values"].map(([html, text]) => (
  <div>
    <label htmlFor={html}>{text}</label>
  </div>
));