Блог

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

 <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);
};
  

Я новичок в 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> часть прямо в своем else и поместить функцию внутрь <span> , но не уверены, сработает ли это.