Отображение суммы значений в React JSX - PullRequest
Новая
       16

Отображение суммы значений в React JSX

0 голосов
/ 10 января 2019

Я пытаюсь сложить все калории в моем массиве, которые хранятся в состоянии. 

  id: shortid.generate(),
  text: this.state.text,
  calorie: this.state.calorie

Это структура данных, которая хранится в массиве состояний еды

В настоящее время я работаю с forEach и использую редуктор для суммирования значений, но его выражение «уменьшить» не является функцией. Я не уверен, что делаю неправильно. 

     class App extends Component {
  state = {
    meals: []
  };

  addMeal = meal => {
    this.setState({
      meals: [meal, ...this.state.meals]
    });
  };

  onDelete = id => {
    this.setState({
      meals: this.state.meals.filter(meal => meal.id !== id)
    });
  };
  render() {
    return (
      <div className="container">
        <div className="jumbotron">
          <h2>Calorie Counter</h2>
          <hr />
          <Form onsubmit={this.addMeal} />
          <table className="table table-striped">
            <thead>
              <tr>
                <th>Meal</th>
                <th>Calories</th>
                <th />
              </tr>
            </thead>
            <tbody>
              {this.state.meals.map(meal => (
                <Meal
                  key={meal.id}
                  meal={meal}
                  onDelete={() => this.onDelete(meal.id)}
                />
              ))}
              <tr>
                <td>Total:</td>
                <td>
                  {this.state.meals.forEach(meal =>
                    meal.reduce(function(y, x) {
                      return y + x;
                    }, 0)
                  )}
                </td>
                <td />
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    );
  }
}

Я пытаюсь отобразить общее количество калорий внутри еды в jsx

Ответы [ 2 ]

0 голосов
/ 10 января 2019

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

this.state.meals.reduce((accumulator, currentValue) => accumulator + currentValue)

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

ОБНОВЛЕНИЕ - Поскольку вы пытаетесь рассчитать калории из массива объектов питания, мы можем сделать это следующим образом - 

this.state.meals.reduce((accumulator, currentValue)=> accumulator + accumulator, currentValue.calorie,0);

Проверьте ссылку для подробного использования метода уменьшения - https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce

0 голосов
/ 10 января 2019

Reduce - это функция массива, а не функция объекта еды. Попробуйте заменить forEach на reduce. 

meals.reduce((totalCalories, meal) => totalCalories + meal.calorie, 0)

Первое сокращение предполагает, что калории - это числа, а второе - если строки 

const meals = [
  { calorie: 10},
  { calorie: 15},
  { calorie: 20}
];

const calorieTotal = meals.reduce((totalCalories, meal) => totalCalories + meal.calorie, 0);

console.log(calorieTotal); // 45 calories

const mealsAsStrings = [
  { calorie: '11'},
  { calorie: '12'},
  { calorie: '13'}
];

const calorieStringTotal = mealsAsStrings.reduce((totalCalories, meal) => totalCalories + parseInt(meal.calorie, 10), 0);

console.log(calorieStringTotal); // 36 calories
...