一个简单的反应应用程序中的数据结构

Question

我正在构建一个反应应用程序，但偶然发现如何从数组中提取值以便以后可以单独设置每个项目的样式。

情况是这样的， javascript中有一个对象数组：

let array = [{a: 1, b: 2, c: 3, d: -1}, {a: 4, b: 5, c: 6, d: -2}, {a: 7, b: 8, c: 9, d: -3}]

我想通过数组进行映射，这样我就可以从数组中的每个对象中提取某些值。

array.map((object) => {
  return <li>{object.a}{object.b}{object.d}</li>
})

我得到的是：

• 1 2 -1
• 4 5 -2
• 7 8 -3

我不能轻易地为一行中的单个项目设置样式。我想要的结果是：

• 1
• 2

• -1

• 4

• 5
• -2 ...

我应该如何映射对象的数组，以便它会输出自己的每个项目

标签？

Answer 1

如果你使用的是最新的 react 版本（16+），那么你可以这样写，使用React.Fragment：

array.map((object, i) => (
    <React.Fragment key={i}> 
        <li>{object.a}</li>
        <li>{object.b}</li>
        <li>{object.d}</li>
    </React.Fragment> 
))

对于小于 16 的 react 版本（这种方法也适用于 16+），这样写：

array.map((object, i) => (
    [ 
        <li key={i}>{object.a}</li>,
        <li key={i+1}>{object.b}</li>,
        <li key={i+2}>{object.d}</li>,
    ]
))

注意：我使用索引作为键，请确保在您的代码中使用正确的键。

Answer 2

你可以这样做：

array.map((object) => {
  return <li>{object.a}</li><li>{object.b}</li><li>{object.d}</li>
})

Answer 3

// ES6 

const list = number => `<li> ${number} </li>`;
const mapObject = ({ a, b, d }) => [a, b, d].map(x => list(x))
const reduceList = (acc, next) => acc.concat(next);

array
  .map(mapObject)
  .reduce(reduceList, []);

// ONE LINER
array
  .map(({ a, b, d }) => [a, b, d].map(x => `<li> ${x} </li>`))
  .reduce((acc, next) => acc.concat(next), []);