数组上的.pop（）/slice。（）无效。需要计数工作-Javascript

真的很难对付这个

我正在用ReactJS建立一个捐赠表格。表单位于另一个组件中，但可以正常工作。我可以做到以下几点：

提交捐款号码/金额

通过handleChange收集，然后将其设置为“捐赠”状态

我能算出捐款总额

完成价值200英镑的交易需要多少钱

每次捐款时，在进度条上添加一些div。让它看起来好像酒吧已经客满了

然而，停止工作的是我统计的捐款数量。我所做的只是调用捐赠阵列的长度，以表示阵列中有多少捐赠：

   <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>

这个项目只剩下3天的资金了

加入**{捐赠的.length}**其他已经支持该项目的捐赠者。每一美元都有帮助

{/* 

{捐赠的.map（（捐赠的，i）=>
{捐赠的}
）}

*/}

但是，当我在app.js中的数组上应用.pop（）时，我的所有数组都会减少到数组中的最后一个值。因此，我的长度不起作用

我已尝试在this.state.com上使用.slice（0）复制数组，但无法使其正常工作。我基本上遇到了同样的问题。或者它给我发了捐款美元的短信。把数字加倍，把我的总数弄乱了

我需要.pop（-1），这样我的进度条就可以填满了，这取决于提交的数量。请帮忙？看来是missy，我已经把代码转移了。其中一个有效，另一个则取决于我在哪里转换代码

很高兴有一个基本的DOM操作函数！我只想数一数有多少人点击提交/捐款。在这上面花了5个小时

多谢各位。 丽娜

从“React”导入React；
从“react dom”导入react dom；
从“./components/ProgressBar”导入ProgressBar；
从“./components/Form”导入表单；
类应用程序扩展了React.Component{
构造函数（）{
超级（）；
此.state={
编号：''，
捐赠：[]，
总额：[]，
总数：0，
剩余：200，
计数：0
};
this.handleChange=this.handleChange.bind（this）；
this.handleSubmit=this.handleSubmit.bind（this）；
//我们需要绑定，否则这是未定义的
}
//处理函数
手变（e）{
this.setState（{number:e.target.value}，（）=>console.log（'number'，this.state.number））；
}
handleSubmit（e）{
e、 预防默认值（）；
this.setState（{investate:this.state.investate.concat（this.state.number）.map（number）}，（）=>console.log（'investate'，this.state.investate））；
this.setState（{sum:this.state.concat（this.state.number）.map（number）}，（）=>{
console.log（'SUM'，this.state.SUM）；
//用于计算捐赠总额的函数
常量数=this.state.sum；
功能添加（a、b）{
返回a+b；
}
//数组中数字的总值
常量计算=数字。减少（增加，0）；
控制台日志（'CALC'，CALC）；
this.setState（{total:calc}）；
//剩余款项的计算
this.setState（{remaining:this.state.remaining-calc}，（）=>console.log（'remaining'，this.state.remaining））；
//循环以打印进度条条目
for（var i=0；i

您可以添加另一个计数器，并为每次捐赠增加它。

---

使用此计数器获取捐赠数量，而不是使用数组长度。

我可以看到您正在设置state.numbers和state.remaining，但当您对numbers var运行reduce函数时，实际上state.sum不是state.sum只是空的，因为您只在handleChange函数中设置state.numbers？No sum不是空的，这基本上是一个捐赠的副本…这里是什么，我正在尝试-我想探索这个选项，如果有人可以帮助我正确的代码。。。常量计数器=this.state.count+1；document.querySelector（'.tally'）.innerHTML=计数器；每次进行新的捐赠时，您都必须像这样递增计数器。state.counter++作为计数器必须更改，它不能是const。提示一下，您不应该直接修改您的状态。您可能需要这样做：

this.setState（{counter:this.state.counter+1}）

。

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