文档

Question

我正在尝试映射对象内部的对象集合并访问颜色项，但是出现错误Unexpected token, expected ","。这就是我试图映射的方式。这是映射对象以从颜色检索值的正确方法吗？

  {Object.keys(this.state.lists).map((item, i) => 
    (this.state.lists[item].colors).map(item, i) =>
      <li  key={i}>{this.state.lists[item].colors[item]} </li>
  )}

this.state.lists看起来像这样：

 {{id: 1, colors:["red", "blue"]}, {id: 2, colors:["green", "yellow"]}}

Answer 1

您没有将callback function传递给第二个map呼叫.map(item, i)。因此，语法错误。而是应该类似.map((item, i) => ...)。

虽然我还没有测试它是否可以与React一起使用，但是这里有一些可能会理解的代码：

const colors = Object.keys(this.state.lists).map(itemKey => {
    return <li key={itemKey}>{this.state.lists[itemKey].colors[0]}</li>
})

渲染时，

<ul>{colors}</ul>

Answer 2

使用ES6函数时，仅当使用1个参数时，才可以省略参数()。实际上，您实际上已经关闭了map，甚至没有看到粗箭头（=>）。您的错误是说它不理解,中的map(item, i)，因为map不接受第二个参数。这里有一些细分，然后针对您的问题提供了一些优化的代码。

ES6的基本功能是() => {}，其中参数位于()大括号之间，代码位于{}之间。

这是一个基本的求和函数：(a, b) => { return a+b }。由于此行只有一行，它是返回值，因此可以省略{}括号。即(a, b) => a+b

这是一个hello函数：(name) => { return 'hello ' + name }。由于它只有1个参数，因此可以使用name => { return 'hello ' + name }。甚至使用上述规则：name => 'hello ' + name。

这些快捷方式可以使代码更容易编写，但可能更难理解。如有疑问，请始终保持括号()以避免混淆。

const obj = {
  1: {id: 1, colors:["red", "blue"]},
  2: {id: 2, colors:["green", "yellow"]}
}

for (key in obj) {
  const item = obj[key];
  item.colors.map((color, i) => {
    console.log( `<li key=${item.id}-${i}>${color}</li>`)
    // Below lines are commented out because StackOverflow
    // does not process JSX tags. Just uncomment and remove
    // the console.log above

    // return (
    //   <li key={item.id}-${i}>{color}</li>
    // )
  });
}

注释：我没有使用Object.keys来获取键数组，而是使用了for...in循环来完成相同的事情。

文档

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...in

遍历对象时出现意外的令牌，预期为“”

2 个答案:

文档