.pop () / slice. () на массивах не работает.Нужно рассчитывать на работу - Javascript

Question

Действительно борюсь с этим!

Я создаю форму пожертвования в ReactJS.Форма находится в другом компоненте, но работает.Я могу сделать следующее:

1. Отправить номер / сумму пожертвования.
2. Соберите это через handleChange, который затем устанавливает это в состояние «пожертвовано».
3. Я могу определить общую сумму пожертвований.
4. Сколько денег нужно для совершения транзакций на сумму £ 200.
5. И добавить несколько делений в индикатор выполнения,каждый раз, когда пожертвование сделано.Чтобы выглядело, как будто бар заполняется.

Что перестало работать, так это мой подсчет того, сколько пожертвований было сделано.Все, что я делаю, это вызываю длину пожертвованного массива, чтобы представить, сколько пожертвований в массиве:

   <div className="columns">
    <div className="column">
      <p>Only 3 days left to fund this project.</p>
      <p>Join the <strong>**{donated.length}**</strong> other donors who have already supported this project. Every dollar helps.</p>
      {/* <div>
        <ul>
          {donated.map((donated, i) => <li key={i}>{donated}</li>)}
        </ul>
      </div> */}
    </div>
  </div>

Однако, поскольку я применяю .pop () к моему массиву в приложении.JS, все мои массивы сводятся к последнему значению в массиве.Поэтому моя длина не работает.

Я пытался продублировать массив с помощью .slice (0) на this.state.donated, но не смог заставить это работать.Я в основном столкнулся с той же проблемой.Или это испортило мое пожертвование $.Удваивая числа и путая мою сумму ..

Мне нужен .pop (-1), чтобы мой индикатор выполнения мог заполняться, в зависимости от того, сколько было отправлено.Пожалуйста помоги?Кажется скучным, я переместил код вокруг.И одно работает, или другое, в зависимости от того, куда я сдвигаю свой код.

Радует и в основном функция манипуляции с DOM!Все, что я хочу - это посчитать, сколько человек нажали кнопку «Отправить» или сделали пожертвованиеПотратил 5 часов на это!

Спасибо.Рина

import React from 'react';
import ReactDOM from 'react-dom';

import ProgressBar from './components/ProgressBar';
import Form from './components/Form';

class App extends React.Component {

constructor() {
  super();

 this.state = {
  number: '',
  donated: [],
  sum: [],
  total: 0,
  remaining: 200,
  count: 0
};

this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
// we need to bind otherwise this is undefined
}

//HANDLE FUNCTIONS
  handleChange(e) {
this.setState({ number: e.target.value }, () => console.log('NUMBER', this.state.number));
}

 handleSubmit(e) {
  e.preventDefault();
  this.setState({donated: this.state.donated.concat(this.state.number).map(Number)}, () => console.log('DONATED', this.state.donated));


 this.setState({sum: this.state.donated.concat(this.state.number).map(Number)}, () => {
  console.log('SUM', this.state.sum);

  // FUNCTION TO CALCULATE TOTAL DONATIONS
  const numbers = this.state.sum;
  function add(a, b) {
    return a + b;
  }

  // TOTAL VALUE OF NUMBERS IN THE ARRAY
  const calc = numbers.reduce(add, 0);
  console.log('CALC', calc);
  this.setState({total: calc});

  // CALCULATION FOR MONIES REMAINING
  this.setState({remaining: this.state.remaining - calc}, () => console.log('REMAINING', this.state.remaining));


  // LOOP TO PRINT OUT PROGRESS BAR ENTRIES
  for (var i = 0; i < this.state.donated.length; i++) {
    if (i < 200) {
      // div +1;
      const div = document.createElement('div');
      div.style.background = 'red';
      div.style.width = this.state.donated.pop() * 2 + 'px';
      div.style.height = '50px';
      div.style.float = 'left';
      document.querySelector('.bar').appendChild(div);
    }
  }

  document.forms['id_form'].reset();
});
}

render() {

return (
  <main>
    <section className="section">
      <h1 className="is-size-2">DONATE FOR A GOOD CAUSE</h1>
      <ProgressBar donated={this.state.donated} remaining={this.state.remaining}/>
      <Form donated={this.state.donated} handleChange={this.handleChange} handleSubmit={this.handleSubmit} />
    </section>
  </main>
  );
 }
}

ReactDOM.render(
<App />,
document.getElementById('root')
);

Answer 1

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