如何在React中使用一个按钮重置多个计数器

我的问题的TLDR是我的每个子组件都保留并显示其自己的计数器点击。这些点击中的每一个也会更新Total显示的。我想知道如何使用Reset按钮来重置那些子组件。

我有一个显示总计的应用程序，多个按钮分别以不同的方式增加总计，还有一个重置按钮。在这个小的应用程序中，权重是一个充满不同权重对象的数组

class CountersContainer extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      total: 0,
    }
    this.resetTotal = this.resetTotal.bind(this)
    this.updateTotalByWeights = this.updateTotalByWeights.bind(this)
  }

  resetTotal = () => {
    this.setState({
      total: 0,
    })
  }

  updateTotalByWeights = value => {
    this.setState({ 
        total: this.state.total + value * 2,
      })
  }

  render() {
    return (
      <>
        <div className="container">
          {weights.map(w => (
            <Weight
              key={w.kg}
              incrementTotal={this.updateTotalByWeights}
              weight={w.kg}
            />
          ))}
        </div>
        <button className="click-target" onClick={this.resetTotal}>
          reset
        </button>
        <WeightOutput total={this.state.total} units={this.state.metric} />
      </>
    )
  }

/=============
// The weight component
/=============
import React from "react"

const Weight = ({ incrementTotal, weight }) => {

    return (
        <div onClick={() => { incrementTotal(weight) }} >
          {weight}
        </div>
    )
}

export default Weight

这很好。我希望每个Weight组件都保留其被点击次数的计数。因此，如果5kg两次单击权重分量，它将显示2的计数，并以所需的方式更新总数。因此，我在体重成分中添加了以下内容：

import React, { useState } from "react"

const Weight = ({ incrementTotal, weight }) => {
    const [count, setCount] = useState(0)

    return (
        <div
            onClick={
                () => { 
                        incrementTotal(weight) 
                        setCount(count + 1)
                    }
                }
         >  
                {count > 0 && <span>{count}</span>}
                {weight}
        </div>
    )
}

export default Weight

这样可实现合计正确地增加总期望值，并且每次单击都会更新组件计数。

但是，现在我需要更改我的“重置”按钮以重置每个重量组件，count而我完全不知如何处理。我考虑过的一些事情是迫使每个权重重新渲染，以使“计数”在层次结构中更进一步。也许“钩子”在这里是错误的实现（这个小应用程序主要是试图使钩子适应）。理想的答案将包括如何解决问题以及潜在的解决方案。

注意：我不确定上面的代码是否完美，我试图去除与该问题无关的部分。在下面，我添加了体重数据，以防万一有人好奇。

export const weights = [
         {
           color: "red",
           kg: 25,
           lbs: 55,
         },
         {
           color: "blue",
           kg: 20,
           lbs: 45,
         },
// this goes on a while.

更新

我已经更新了体重分量，使其看起来像这样：

import React, { useState, useEffect } from "react"

const Weight = props => {
    const [count, setCount] = useState(0)

    useEffect(() => {
      setCount(0)
    }, [props.reset])

    return (
      <div
        onClick={() => {
          props.incrementTotal(props.weight)
          setCount(count + 1)
        }}
      >
        {count > 0 && <span>{count}</span>}
        {props.weight}
      </div>
    )
}

export default Weight

并添加reset: 0到我的重置setState函数中。这并没有解决我的问题，但是根据React Hook Docs看来确实是一个有前途的方向。

更新2我接受了下面的答案，因为它是正确的，尽管我没有完全理解它。为了实施以下解决方案，我必须更新“重置”值。我通过了。

我不确定这是否是一个好的解决方案。我相信它会重新渲染所有重量分量。这可能是不好的，尤其是当有1000个复杂的组件时。

this.setState({
   reset: !this.state.reset
})