Reactjs 计数器应用程序中的重置计数功能未将计数设置为0

我在计数器应用中将计数重置为0时遇到问题。它没有将任何计数器的计数重置为0，我尝试了

console.log

each counter.count，但它显示的是

undefined

App.js

：

import React from "react";
import "./App.css";
import Counter from "./components/Counter";

export class App extends React.Component {
  state = {
    counters: []
  };

  addCounter = () => {
    this.setState({
      counters: [...this.state.counters, Counter]
    });
  };

  reset = () => {
    const counters = this.state.counters.map(counter => {
      counter.count = 0;
      return counter;
    });
    // console.log(counters.count);
    this.setState({ counters });
  };

  render() {
    return (
      <div className="App">
        <button onClick={this.reset}>Reset</button>
        <button onClick={this.addCounter}>Add Counter</button>
        {this.state.counters.map((Counter, index) => (
          <Counter key={index} />
        ))}
      </div>
    );
  }
}

export default App;

import React, { Component } from 'react'

export class Counter extends Component {
    state={
        count:0,
      }

      increment=()=>{
        this.setState({ count: this.state.count + 1 });
      }

      decrement=()=>{
        this.setState({ count: this.state.count - 1 });
      }

      render() {
        return (
          <div>
            <span><button onClick={this.increment}>+</button></span>

          <span>{this.state.count}</span>
          <span><button onClick={this.decrement}>-</button></span>
          </div>


        )
      }
}

export default Counter

重置计数器应将所有计数器的计数重置为0。

使用时

this.setState({
      counters: [...this.state.counters, Counter]
});

您已将

React类

保存到

计数器

中。因此，当您映射到重置为0时，您需要

新类

来获得

状态。计数

如下：

reset = () => {
    const counters = this.state.counters.map(counter => {
      (new counter()).state.count = 0;
      return counter;
    });

    for (let counter of counters) {
      console.log((new counter()).state);
    }
    this.setState({ counters });
};

当你使用

this.setState({
      counters: [...this.state.counters, Counter]
});

您已将

React类

保存到

计数器

中。因此，当您映射到重置为0时，您需要

新类

来获得

状态。计数

如下：

reset = () => {
    const counters = this.state.counters.map(counter => {
      (new counter()).state.count = 0;
      return counter;
    });

    for (let counter of counters) {
      console.log((new counter()).state);
    }
    this.setState({ counters });
};

是时候休息了

将所有

递增

和

递减

和

重置

功能移动到父级，

应用程序

另外，添加一个单独的数组

count

state以监视每个计数器的当前计数

// App
export class App extends React.Component {
  state = {
    counters: [],
    count: [] // additional state to store count for each counter
  };

  addCounter = () => {
    this.setState({
      counters: [...this.state.counters, Counter],
      count: [...this.state.count, 0]
    });
  };

  reset = () => {
    this.setState({
      count: this.state.count.map(c => 0)
    });
  };

  // lifted up from Counter
  increment = index => {
    this.setState({
      count: this.state.count.map((c, i) => (i === index ? c + 1 : c))
    });
  };

  // lifted up from Counter
  decrement = index => {
    this.setState({
      count: this.state.count.map((c, i) => (i === index ? c - 1 : c))
    });
  };

  render() {
    return (
      <div className="App">
        <button onClick={this.addCounter}>Add Counter</button>
        <button onClick={this.reset}>Reset</button>
        {this.state.counters.map((Counter, index) => (
          <Counter
            key={index}
            increment={() => this.increment(index)}
            decrement={() => this.decrement(index)}
            count={this.state.count[index]}
          />
        ))}
      </div>
    );
  }
}

//应用程序
导出类应用程序扩展React.Component{
状态={
柜台：[]，
计数：[//存储每个计数器计数的附加状态
};
addCounter=（）=>{
这是我的国家({
计数器：[…this.state.counters，计数器]，
计数：[…this.state.count，0]
});
};
重置=（）=>{
这是我的国家({
count:this.state.count.map（c=>0）
});
};
//从柜台上抬起来
增量=索引=>{
这是我的国家({
count:this.state.count.map（（c，i）=>（i==索引？c+1:c））
});
};
//从柜台上抬起来
减量=指数=>{
这是我的国家({
count:this.state.count.map（（c，i）=>（i==索引？c-1:c））
});
};
render（）{
返回(
添加计数器
重置
{this.state.counters.map（（计数器，索引）=>(
this.increment（index）}
减量={（）=>this.decrement（index）}
count={this.state.count[index]}
/>
))}
);
}
}

//计数器
导出类计数器扩展了React.Component{
render（）{
返回(
+
{this.props.count}
-
);
}
}

是时候休息了

将所有

递增

和

递减

和

重置

功能移动到父级，

应用程序

另外，添加一个单独的数组

count

state以监视每个计数器的当前计数

// App
export class App extends React.Component {
  state = {
    counters: [],
    count: [] // additional state to store count for each counter
  };

  addCounter = () => {
    this.setState({
      counters: [...this.state.counters, Counter],
      count: [...this.state.count, 0]
    });
  };

  reset = () => {
    this.setState({
      count: this.state.count.map(c => 0)
    });
  };

  // lifted up from Counter
  increment = index => {
    this.setState({
      count: this.state.count.map((c, i) => (i === index ? c + 1 : c))
    });
  };

  // lifted up from Counter
  decrement = index => {
    this.setState({
      count: this.state.count.map((c, i) => (i === index ? c - 1 : c))
    });
  };

  render() {
    return (
      <div className="App">
        <button onClick={this.addCounter}>Add Counter</button>
        <button onClick={this.reset}>Reset</button>
        {this.state.counters.map((Counter, index) => (
          <Counter
            key={index}
            increment={() => this.increment(index)}
            decrement={() => this.decrement(index)}
            count={this.state.count[index]}
          />
        ))}
      </div>
    );
  }
}

//应用程序
导出类应用程序扩展React.Component{
状态={
柜台：[]，
计数：[//存储每个计数器计数的附加状态
};
addCounter=（）=>{
这是我的国家({
计数器：[…this.state.counters，计数器]，
计数：[…this.state.count，0]
});
};
重置=（）=>{
这是我的国家({
count:this.state.count.map（c=>0）
});
};
//从柜台上抬起来
增量=索引=>{
这是我的国家({
count:this.state.count.map（（c，i）=>（i==索引？c+1:c））
});
};
//从柜台上抬起来
减量=指数=>{
这是我的国家({
count:this.state.count.map（（c，i）=>（i==索引？c-1:c））
});
};
render（）{
返回(
添加计数器
重置
{this.state.counters.map（（计数器，索引）=>(
this.increment（index）}
减量={（）=>this.decrement（index）}
count={this.state.count[index]}
/>
))}
);
}
}

//计数器
导出类计数器扩展了React.Component{
render（）{
返回(
+
{this.props.count}
-
);
}
}

---

您无法在应用中重置计数器，因为应用程序包含一个计数器类数组，并且没有数据。尝试将this.state.counters设置为数据（

{counter:0}

），并将递增和递减函数传递给计数器类。例如，您可以执行的操作无法在应用中重置计数器，因为应用是计数器类数组，而没有数据。尝试将this.state.counters设置为数据（

{counter:0}

），并将递增和递减函数传递给计数器类示例，以说明可以执行的操作