Question

我正在尝试映射具有“ x”属性的对象数组，以将这些属性显示在html表中，以用于系统报告页面。但是，它返回具有所有属性以及所有对象的单个字符串，因此它不允许我对这些属性中的每一个进行样式设置...这个想法被设置为“ space-between”显示在标题下方。 OBS：使用react-js。

<Text style={styles.infos}>
      {Test.map(item => {
          let keys = Object.keys(item);
          return keys.map(key => item[key]);
      })}
</Text>

工作方式示例： [{"a": "a", "b": "b", "c": "c"},{"d": "d", "e": "e", "f": "f"},{"g": "g", "h": "h", "i": "i"}] 预期：<div><p>a</p><p>b</p><p>c</p></div>, <div><p>d</p><p>e</p><p>f</p></div>, <div><p>g</p><p>h</p><p>i</p></div> 实际：<div><p>abcdefghi</p></div>

Answer 1

您可以在''之后以Object.keys()的空间加入Array

<Text style={styles.infos}>
      {Test.map(item => (<p>{Object.keys(item).join('')}<p>))}
</Text>

let arr = [{"a": "a", "b": "b", "c": "c"},{"d": "d", "e": "e", "f": "f"},{"g": "g", "h": "h", "i": "i"}];

let res = arr.map(a=> Object.keys(a).join(''))

console.log(res)

Answer 2

let arr = [{"a": "a", "b": "b", "c": "c"},{"d": "d", "e": "e", "f": "f"},{"g": "g", "h": "h", "i": "i"}];

let res = arr.map(a=> {return `<div>${ Object.keys(a).map(k => { return `<p>${a[k]}</p>` }) }</div>`})



console.log(res)

如何映射对象属性

2 个答案: