Неожиданная ошибка токена при возврате объекта из функции карты - reactjs

Question

Я пытаюсь вернуть словарь / объект из функции map для массива объектов.

Но, получив Unexpected token, я связал его трассировку, может кто-нибудь помочь, в каком месте я нахожусь неправильно?

Мой пример кода

class App extends Component {


  render() {

    let a = [
    {
      "a": 123,
      "b": "99",
    }, {
      "a": 333,
      "b": "33",
    }
  ];

  a.map((value, key) => {
    return {`${key-text}`: value["a"]};
  });

    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    );
  }
}

В приведенном выше коде для строки return { $ {key-text} : value["a"]}; отображается неожиданный токен, в чем здесь ошибка?

Answer 1

Вам нужен родительский объект для создания динамических c ключей.

let a = [
    {
      "a": 123,
      "b": "99",
    }, {
      "a": 333,
      "b": "33",
    }
  ];

  a.map((value, key) => {
    let x = {};
    x[key+"-text"] = value["a"];
    console.log(x);
    return x;
  });

Answer 2

Здесь вы использовали text как переменную, но не определили ее. поэтому вы должны определить переменную text над картой.

Like

  const text = 0; // or whatever number you want.
  a.map((value, key) => {
    return {`${key-text}`: value["a"]};
  });

OR

, которую вы можете использовать text как string

Like

  a.map((value, key) => {
    return {`${key}-text}`: value["a"]};
  });

попробуйте оба варианта и держите то, что вам подходит.

Answer 3

В вашей функции карты key-text на самом деле ищет переменную с именем key-text, которая не существует, и, следовательно, ошибка. Если вы пытаетесь интерполировать text в key, изменение его на это должно сработать

a.map((value, key) => {
  return {[`${key}-text`]: value["a"]};
});

Надеюсь, это поможет.

Answer 4

Ошибка в

a.map((value, key) => {
    return {`${key-text}`: value["a"]};
});

заменить на

a.map((value, index) => {
    return {`${index}`: value["a"]};
});

здесь индекс является ссылкой на объект в массиве