Неожиданный токен, ожидаемый "," при прохождении по объектам

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

При использовании функций ES6 вы можете опустить () параметров, только если вы используете 1 параметр.То, что вы сделали, на самом деле закрыло ваш map еще до того, как вы добрались до жирной стрелки (=>).Ваша ошибка говорит, что он не понимает , в map(item, i), так как map не принимает второй параметр.Вот небольшая разбивка, за которой следует некоторый оптимизированный код для вашей проблемы.

Базовая функция ES6 - () => {}, где параметры заключаются в скобки (), а код - между{}.

Вот основная функция суммы: (a, b) => { return a+b }.Так как здесь только одна строка и это возвращаемое значение, вы можете опустить скобки {}.т.е. (a, b) => a+b

Вот функция приветствия: (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

Answer 2

Вы не передаете функцию обратного вызова на ваш второй 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>