Как обновить строку таблицы?

Question

У меня есть таблица, отображающая элементы, выбранные пользователем.Прямо сейчас, когда пользователь добавляет элемент, элемент добавляется в виде новой строки.Я попытался изменить его так, чтобы вместо создания новой строки он увеличивал сумму.Это, однако, не сработало, так как я получил сообщение о том, что мне нужно другое после :.

<table>
  <thead>
    <tr>
      <th>Item</th>
      <th>Amount</th>
    </tr>
  </thead>
  <tbody>
    {this.state.basket.map(item => {
      return (
        {this.getAmount(item) === 0 ? (
          <tr>
            <td>{item}</td>
            <td>{this.getAmount(item)}</td>
          </tr>
        ) : (
          this.updateAmount(item);
        )
      )
    })}
  </tbody>
</table>

Как бы изменить это, чтобы amount рядом с элементом?

Метод получения суммы:

getAmount = item => {
  var amount = 0;
  var basket = [...this.state.basket];
  basket.forEach(i => {
    if (i === item) {
      amount++;
    }
  });
  console.log(item + " : " + amount);
  return parseInt(amount);
};

Метод обновления суммы:

updateAmount = item => {
  return this.getAmount(item);
};

Answer 1

Я новичок в React, но похоже, что метод, который вы вызываете в своем 'else', просто возвращает некоторое значение, а не jsx.Ваш результат 'if' возвращает jsx, но ваш else просто вызывает функцию, которая просто возвращает значение.

getAmount = item => {
  var amount = 0;
  var basket = [...this.state.basket];
  basket.forEach(i => {
    if (i === item) {
      amount++;
    }
  });
  console.log(item + " : " + amount);
  return (
    <React.Fragment>
      <span>{parseInt(amount)}</span>
    </React.Fragment>
  )
};

Я, скорее всего, далеко, так как я только начал изучать React, но я думаю, что это стоитвыстрел, если это поможет.Или вы можете выполнить часть <React.Fragment> прямо в своем другом и поместить функцию внутри <span>, но не уверены, сработает ли это.